Actionsheet 行动按钮

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-actionsheet": "path/to/zanui-weapp/dist/actionsheet/index"
  4.   }
  5. }

使用指南

  1. <button bindtap="openActionSheet">Open ActionSheet</button>
  2. <view class="actionsheet-container">
  3.   <!-- 监听自定义事件 cancel 和 actionclick，绑定回调函数 -->
  4.   <zan-actionsheet
  5.     show="{{ show }}"
  6.     actions="{{ actions }}"
  7.     cancel-text="{{ cancelText }}"
  8.     cancel-with-mask="{{ cancelWithMask }}"
  9.     bind:cancel="closeActionSheet"
  10.     bind:actionclick="handleActionClick"
  11.   >
  12.   </zan-actionsheet>
  13. </view>
  1. // 在 Page 中混入 Actionsheet 里面声明的方法
  2. Page({
  3.   data: {
  4.     show: false,
  5.     cancelWithMask: true,
  6.     actions: [{
  7.       name: '选项1',
  8.       subname: '选项描述语1',
  9.       loading: false
  10.     }, {
  11.       name: '选项2',
  12.       subname: '选项描述语2',
  13.       loading: false
  14.     }, {
  15.       name: '去分享',
  16.       openType: 'share'
  17.     }],
  18.     cancelText: '关闭 Action'
  19.   },
  20.   openActionSheet() {
  21.     this.setData({
  22.       'show': true
  23.     });
  24.   },
  25.   closeActionSheet() {
  26.     this.setData({
  27.       'show': false
  28.     });
  29.   },
  30.   handleActionClick({ detail }) {
  31.     // 获取被点击的按钮 index
  32.     const { index } = detail;
  33.   }
  34. });

Actionsheet 支持的具体参数如下（ 传入时使用分隔线写法 ）

参数 说明 类型 默认值 必须
show 用来表示是否展示行动按钮 Boolean false
actions 指定弹层里的按钮 Array []
cancelText 行动按钮底部取消按钮的文案，不传则不显示取消按钮 String
cancelWithMask 是否在点击背景时，关闭行动按钮 Boolean false
mask-class 用于控制蒙层样式的外部类 String
container-class 用于控制容器样式的外部类 String

actions 的具体数据结构

  1. // actions 为数组结构传入
  2. [{
  3.   // 按钮文案
  4.   name: '选项1',
  5.   // 按钮描述文案，不传就不显示
  6.   subname: '选项描述语1',
  7.   // 按钮是否显示为 loading
  8.   loading: false,
  9.   // 按钮的微信开放能力
  10.   // 具体支持可参考微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
  11.   openType: 'share'
  12. }]

Actionsheet 行动按钮 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/interactive/actionsheet