JSAPI

Since 8.2

actionSheet

提供一种供选择选项的列表，它会dock在屏幕的下边沿

使用方法

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;
  }
});

代码演示

基本功能

<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>
查看演示
扫码查看
用支付宝扫码运行

API

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

入参

名称类型描述必选默认值版本
titlestring标题N
btnsarray一组按钮，item类型是stringY
cancelBtnstring设置取消按钮及文字N
destructiveBtnIndexint（IOS特殊处理）指定按钮的索引号，从0开始，使用场景：需要删除或清除数据等类似场景，默认红色N
fnfunction不是API调用后被回调，而是用户选择选项之后的回调函数N

出参

格式是 {data: {index: 0}} 这个index是用户点击的按钮在actionSheet中的位置，从0开始