ActionSheet 动作面板

介绍

底部弹出框，常用于给用户提供多个选项。

使用指南

一般用法

click点击事件，当disable生效时不会触发。

<button bindtap="showActionSheet">点击打开popup</button>
<tms-action-sheet show="{{show}}" list-data="{{listData}}" bind:on-click-item="onClickItem"/>

Component({
  data: {
    listData: [
      {
        name: '选项一',
        desc: '描述信息',
      },
      {
        name: '选项二',
      },
      {
        name: '选项三',
      },
    ],
  },
  methods: {
    showActionSheet() {
      this.setData({
        show: true,
      });
    },
    onClickItem(event) {
      // index为点击选项对应的数组下标，所有openType对应的事件均包含该值。
      const { index } = event.detail;
    }
  }
})

标题和描述

<tms-action-sheet show="{{show}}" list-data="{{listData}}" title="标题" description="关于弹窗的描述"/>

取消按钮

<tms-action-sheet show="{{show}}" list-data="{{listData}}" cancel-text="取消"/>

禁用状态

<tms-action-sheet show="{{show}}" list-data="{{listData}}" cancel-text="取消"/>

Component({
  data: {
    listData: [
      {
        name: '选项一',
        desc: '描述信息',
      },
      {
        name: '禁用选项',
        disable: true
      },
      {
        name: '选项三',
      },
    ],
  },
})

加载中

<tms-action-sheet show="{{show}}" list-data="{{listData}}" cancel-text="取消"/>

Component({
  data: {
    listData: [
      {
        name: '选项一',
        loading: true,
      },
      {
        name: '选项二',
      },
      {
        name: '选项三',
      },
    ],
  },
})

点击事件

<tms-action-sheet show="{{show}}" list-data="{{listData}}" bind:getphonenumber="onGetPhone"/>

Component({
  data: {
    listData: [
      {
        name: '选项一',
        openType: 'getPhoneNumber'
      },
      {
        name: '选项二',
      },
      {
        name: '选项三',
      },
    ],
  },
  methods: {
    onGetPhone(event) {
      // index为点击选项对应的数组下标，所有openType对应的事件均包含该值。
      const { encryptedData, iv, index } = event.detail;
    }
  }
})

API

属性	说明	类型	默认值	版本
list-data	选项数据集合	Array	[]
show	控制弹窗显示、隐藏	boolean	false
show-close-icon	是否显示关闭图标	boolean	true
hide-cover	是否隐藏灰色遮罩层	boolean	false
control	受控模式，点击蒙层或取消按钮不会自动隐藏	boolean	false
description	描述信息	string	-
bottom-safe-area	为iphoneX等部分机型留出底部空间	boolean	true
title	弹窗顶部标题	string	-
duration	弹出动画执行时间，单位毫秒	Number	300
mask-style	遮罩层的样式	string	-
cancel-text	底部取消按钮的文案	string	-
z-index	弹窗的z-index值	Number	9999

list-data成员对象的数据结构

部分属性属于微信开放能力，详情请查阅 微信官方文档 (opens new window)

属性	说明	类型	默认值
name	选项展示的文本内容	string
desc	选项副标题文本	string
style	自定义选项容器元素样式	string
loading	选项加载中的状态	boolean	false
disable	选项禁用状态，无触摸反馈	boolean	false
openType	请参考微信官方文档	string
hoverStopPropagation	请参考微信官方文档	boolean	false
hoverStartTime	请参考微信官方文档	Number
lang	请参考微信官方文档	string
sessionFrom	请参考微信官方文档	string
sendMessageTitle	请参考微信官方文档	string
sendMessagePath	请参考微信官方文档	string
sendMessageImg	请参考微信官方文档	string
appParameter	请参考微信官方文档	string
showMessageCard	请参考微信官方文档	boolean	false

如果设置了有效的openType值，即时没有绑定相应的事件函数，点击也可能唤起对应的行为；如果不需要相应的功能，请将openType置空。

EVENTS

属性	说明	类型
bind:on-click-title	点击顶部标题事件	(event) => {}
bind:on-click-description	点击描述文字事件	(event) => {}
bind:on-click-overlay	点击遮罩层事件	(event) => {}
bind:on-click-close-icon	点击关闭图标事件	(event) => {}
bind:on-click-item	点击选项事件	(event) => {}
bind:on-tap-item	点击选项事件，disable时无效。	(event) => {}
bind:on-click-cancel	点击底部取消按钮事件	(event) => {}
bind:getphonenumber	获取用户手机号回调，详细请查阅微信官方文档	(event) => {}
bind:lunchapp	请查阅微信官方文档	(event) => {}
bind:opensetting	请查阅微信官方文档	(event) => {}
bind:error	请查阅微信官方文档	(event) => {}
bind:contact	请查阅微信官方文档	(event) => {}
bind:getuserinfo	请查阅微信官方文档	(event) => {}
bind:chooseavatar	请查阅微信官方文档	(event) => {}

on-click-item和on-tap-item的区别是：选项禁用时，click 事件不会触发，tap 事件依然会触发。
微信开放能力相关的几个事件，回调中的event.detail除了官方参数外，还有index属性，对应触发该事件的选项数组下标。

css变量

// 弹框面板背景色
--action-sheet-background: rgba(255, 255, 255, 1);
// 标题font-size
--action-sheet-title-font-size: 36rpx;
// 标题文本颜色
--action-sheet-title-color: #000;
// 面板描述font-size
--action-sheet-description-font-size: 32rpx;
// 面板描述文本颜色
--action-sheet-description-color: #666;
// 选项禁用时透明度
--action-sheet-disable-opacity: .4;
// 选项正文字体大小
--action-sheet-item-name-font-size: 34rpx;
// 选项正文字体颜色
--action-sheet-item-name-color: #000;
// 选项副标题字体大小
--action-sheet-item-desc-font-size: 26rpx;
// 选项副标题颜色
--action-sheet-item-desc-color: #999;
// 选项长按时背景色
--action-sheet-item-hover-background: rgba(0, 0, 0, .1);
// 取消按钮字体大小
--action-sheet-cancel-font-size: 32rpx;
// 取消按钮文本颜色
--action-sheet-cancel-color: #000;
// 取消按钮高度
--action-sheet-cancel-height: 96rpx;

FAQ