Bottom sheet

Use the actionSheet API

AlipayJSBridge.call('actionSheet', {
  'title': 'Title',
  'btns': ['Button 1', 'Button 2', 'Button 3'],
  'cancelBtn': 'Cancel',
  'destructiveBtnIndex': 2
}, function(data) {
  switch (data.index) { // The index indicates the position of the button that the user clicks in the actionSheet. The index starts from 0.
    case 0:
      alert('Button 1');
      break;
    case 1:
      alert('Button 2');
      break;
    case 2:
      alert('Button 3');
      break;
    case 3:
      alert('Cancel button');
      break;
  }
});

Code sample

<h1>Click the button to open the actionSheet</h1>
<a href="javascript:void(0)" class="btn actionSheet">Open actionSheet</a>

<script>
function ready(callback) {
  // If AlipayJSBridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.actionSheet').addEventListener('click', function() {
    AlipayJSBridge.call('actionSheet',{
      'title': 'Title',
      'btns': ['Button 1', 'Button 2', 'Button 3'],
      'cancelBtn': 'Cancel',
      'destructiveBtnIndex': 2
    }, function(data) {
      switch (data.index) { // The index indicates the position of the button that the user clicks in the actionSheet. The index starts from 0.
        case 0:
          alert('Button 1');
          break;
        case 1:
          alert('Button 2');
          break;
        case 2:
          alert('Button 3');
          break;
        case 3:
          alert('Cancel button');
          break;
      }
    });
  });
});
</script>

API reference

AlipayJSBridge.call('actionSheet',{
  title, btns, cancelBtn, destructiveBtnIndex
}, fn)

Input parameters

Property	Type	Description	Required	Default value
title	string	The title.	No	""
btns	array	Array of button label strings.	Yes	[]
cancelBtn	string	Text for the cancel button.	No	""
destructiveBtnIndex	int	Zero-based index of a button styled as destructive on iOS (red by default). Use for actions such as deleting or purging data.	No	-
fn	function	Callback invoked when the user selects an option.	No	-

Output parameters

Response format: {data: {index: 0}}. The index value is the zero-based position of the clicked button.