全部产品

选择列表

更新时间:2020-04-13 16:44:45

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

actionSheet 接口的使用方法

  1. AlipayJSBridge.call('actionSheet', {
  2. 'title': '标题',
  3. 'btns': ['第一个按钮', '第二个按钮', '第三个按钮'],
  4. 'cancelBtn': '取消',
  5. 'destructiveBtnIndex': 2
  6. }, function(data) {
  7. switch (data.index) { // index 标示用户点击的按钮在 actionSheet 中的位置,从 0 开始
  8. case 0:
  9. alert('第一个按钮');
  10. break;
  11. case 1:
  12. alert('第二个按钮');
  13. break;
  14. case 2:
  15. alert('第三个按钮');
  16. break;
  17. case 3:
  18. alert('取消按钮');
  19. break;
  20. }
  21. });

代码示例

  1. <h1>点击按钮调出 actionSheet</h1>
  2. <a href="javascript:void(0)" class="btn actionSheet">打开 actionSheet</a>
  3. <script>
  4. function ready(callback) {
  5. // 如果 jsbridge 已经注入则直接调用
  6. if (window.AlipayJSBridge) {
  7. callback && callback();
  8. } else {
  9. // 如果没有注入则监听注入的事件
  10. document.addEventListener('AlipayJSBridgeReady', callback, false);
  11. }
  12. }
  13. ready(function() {
  14. document.querySelector('.actionSheet').addEventListener('click', function() {
  15. AlipayJSBridge.call('actionSheet',{
  16. 'title': '标题',
  17. 'btns': ['第一个按钮', '第二个按钮', '第三个按钮'],
  18. 'cancelBtn': '取消',
  19. 'destructiveBtnIndex': 2
  20. }, function(data) {
  21. switch (data.index) { // index 标示用户点击的按钮,在 actionSheet 中的位置,从 0 开始
  22. case 0:
  23. alert('第一个按钮');
  24. break;
  25. case 1:
  26. alert('第二个按钮');
  27. break;
  28. case 2:
  29. alert('第三个按钮');
  30. break;
  31. case 3:
  32. alert('取消按钮');
  33. break;
  34. }
  35. });
  36. });
  37. });
  38. </script>

API

  1. AlipayJSBridge.call('actionSheet',{
  2. title, btns, cancelBtn, destructiveBtnIndex
  3. }, 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 开始。