Prompts a list of options at the bottom of screen.
AlipayJSBridge.call('actionSheet', {
'title': 'Title',
'btns': ['Button 1', 'Button 2', 'Button 3'],
'cancelBtn': 'Cancel',
'destructiveBtnIndex': 2
}, function(data) {
switch (data.index) {
// The button 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;
}
});
<h1>Press button for actionSheet</h1>
<a href="javascript:void(0)" class="btn actionSheet">Open actionSheet</a>
<script>
function ready(callback) {
// Invoke directly if JSBridge is already injected
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Otherwise listen to AlipayJSBridgeReady 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 button 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>
AlipayJSBridge.call('actionSheet', {
title, btns, cancelBtn, destructiveBtnIndex
}, fn)
| Name | Type | Description | Mandatory | Default | Version |
|---|---|---|---|---|---|
| title | string | Title | N | ||
| btns | array | An array of button text strings | Y | ||
| cancelBtn | string | The text for cancel button | N | ||
| destructiveBtnIndex | int | (For iOS), a 0-indexed number that indicates the position of special destructive button, the text color of this button is red by default | N | ||
| fn | function | The callback function, invoked when any of the buttons is pressed | N |
Format: {data: {index: 0}} The index number is 0-indexed and it indicates the position of the pressed button