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开始