文档

选择列表

更新时间:

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

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

  • 本页导读 (0)