调用actionSheet实现选择列表_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

此接口提供一种有选项的列表，它将停留在屏幕的下边沿。

actionSheet 接口的使用方法

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)

入参

属性	类型	描述	必填	默认值
title	string	标题。	N	“”
btns	array	一组按钮，item 类型是 string。	Y	[]
cancelBtn	string	设置取消按钮及文字。	N	“”
destructiveBtnIndex	int	经 iOS 特殊处理过的指定按钮的索引号从 0 开始。用于需要删除或清除数据等场景，默认为红色。	N	-
fn	function	不是 API 调用后被回调，而是用户选择选项之后的回调函数。	N	-

出参

格式为 {data: {index: 0}}。其中 index 是用户单击的按钮在 actionSheet 中的位置，从 0 开始。