提供一种供选择选项的列表，它会dock在屏幕的下边沿
AlipayJSBridge.call('actionSheet', {
'title': '标题',
'btns': ['第一个按钮', '第二个按钮', '第三个按钮'],
'cancelBtn': '取消', // android 上无效
'destructiveBtnIndex': 2
}, function(data) {
switch (data.index) { // index标示用户点击的按钮，在actionSheet中的位置，从0开始
case 0:
alert('第一个按钮');
break;
case 1:
alert('第二个按钮');
break;
case 2:
alert('第三个按钮');
break;
case 3:
alert('取消按钮');
break;
}
});
<h1>点击按钮调出actionSheet</h1>
<a href="javascript:void(0)" class="btn actionSheet">打开actionSheet</a>
<script>
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.actionSheet').addEventListener('click', function() {
AlipayJSBridge.call('actionSheet',{
'title': '标题',
'btns': ['第一个按钮', '第二个按钮', '第三个按钮'],
'cancelBtn': '取消',
'destructiveBtnIndex': 2
}, function(data) {
switch (data.index) { // index标示用户点击的按钮，在actionSheet中的位置，从0开始
case 0:
alert('第一个按钮');
break;
case 1:
alert('第二个按钮');
break;
case 2:
alert('第三个按钮');
break;
case 3:
alert('取消按钮');
break;
}
});
});
});
</script>
AlipayJSBridge.call('actionSheet',{
title, btns, cancelBtn, destructiveBtnIndex
}, fn)
| 名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
|---|---|---|---|---|---|
| title | string | 标题 | N | ||
| btns | array | 一组按钮，item类型是string | Y | ||
| cancelBtn | string | 设置取消按钮及文字 | N | android 上无效 | |
| destructiveBtnIndex | int | （IOS特殊处理）指定按钮的索引号，从0开始，使用场景：需要删除或清除数据等类似场景，默认红色 | N | ||
| fn | function | 不是API调用后被回调，而是用户选择选项之后的回调函数 | N |
格式是 {data: {index: 0}} 这个index是用户点击的按钮在actionSheet中的位置，从0开始