The interface provides a list of options, which docks at the bottom of the screen.
Use actionSheet interface
AlipayJSBridge.call('actionSheet', {
'title': 'Title',
'btns': ['First button ', 'Second button ', 'Third button'],
'cancelBtn': 'Cancel',
'destructiveBtnIndex': 2
}, function(data) {
switch (data.index) { // index indicates the position of the button clicked by users in actionSheet, starting from 0
case 0:
alert ('First button');
break;
case 1:
alert ('Second button');
break;
case 2:
alert ('Third button');
break;
case 3:
alert ('Cancel button');
break;
}
});
Code sample
<h1>Click the button to call actionSheet</h1>
<a href="javascript:void(0)" class="btn actionSheet">Open actionSheet</a>
<script>
function ready(callback) {
// Call directly if JSBridge has been injected
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Monitor the injected events if JSBridge hasn't been injected
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.actionSheet').addEventListener('click', function() {
AlipayJSBridge.call('actionSheet',{
'title': 'Title',
'btns': ['First button ', 'Second button ', 'Third button'],
'cancelBtn': 'Cancel',
'destructiveBtnIndex': 2
}, function(data) {
switch (data.index) { // index indicates the position of the button clicked by users in actionSheet, starting from 0
case 0:
alert ('First button');
break;
case 1:
alert ('Second button');
break;
case 2:
alert ('Third button');
break;
case 3:
alert ('Cancel button');
break;
}
});
});
});
</script>
API
AlipayJSBridge.call('actionSheet',{
title, btns, cancelBtn, destructiveBtnIndex
}, fn)
Input parameters
Name | Type | Description | Required | Default value | Version |
---|---|---|---|---|---|
title | string | Title | N | ||
btns | array | A set of buttons; the item type is string | Y | ||
cancelBtn | string | Configure the cancel button and text | N | ||
destructiveBtnIndex | int | (Special processing in iOS) Specifies the index number of the button, starting from 0 Scenario: Data needs to be deleted or cleared. It is in red color by default |
N | ||
fn | function | It’s the callback function after you select an option rather than being called back after API called | N |
Output parameter
The format is {data: {index: 0}}
. The index
refers to the position of button clicked by users in actionSheet, starting from 0.