ActionSheet 上拉菜单

从底部弹出的模态框，提供和当前场景相关的操作菜单。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "ActionSheet",
  3.     "usingComponents": {
  4.         "wux-button": "../../dist/button/index",
  5.         "wux-actionsheet": "../../dist/actionsheet/index"
  6.     }
  7. }

示例

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-actionsheet 或其他，之后在 page.js 中调用 $wuxActionSheet(id) 获取匹配到的第一个组件实例对象。

  1. <wux-actionsheet id="wux-actionsheet" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">ActionSheet</view>
  6.         <view class="page__desc">上拉菜单</view>
  7.     </view>
  8.     <view class="page__bd page__bd_spacing">
  9.         <wux-button block type="light" bind:click="showActionSheet1">原生 ActionSheet</wux-button>
  10.         <wux-button block type="light" bind:click="showActionSheet2">iOS ActionSheet</wux-button>
  11.         <wux-button block type="light" bind:click="showActionSheet3">wx ActionSheet</wux-button>
  12.     </view>
  13. </view>
  1. import { $wuxActionSheet } from '../../dist/index'
  3. Page({
  4.     data: {},
  5.     onLoad() {},
  6.     showActionSheet1() {
  7.         wx.showActionSheet({
  8.             itemList: ['实例菜单', '实例菜单']
  9.         })
  10.     },
  11.     showActionSheet2() {
  12.         $wuxActionSheet().showSheet({
  13.             titleText: '自定义操作',
  14.             buttons: [{
  15.                     text: 'Go Dialog'
  16.                 },
  17.                 {
  18.                     text: 'Go Toast'
  19.                 },
  20.             ],
  21.             buttonClicked(index, item) {
  22.                 index === 0 && wx.navigateTo({
  23.                     url: '/pages/dialog/index'
  24.                 })
  26.                 index === 1 && wx.navigateTo({
  27.                     url: '/pages/toast/index'
  28.                 })
  30.                 return true
  31.             },
  32.             cancelText: '取消',
  33.             cancel() {},
  34.             destructiveText: '删除',
  35.             destructiveButtonClicked() {},
  36.         })
  37.     },
  38.     showActionSheet3() {
  39.         if (this.timeout) clearTimeout(this.timeout)
  41.         const hideSheet = $wuxActionSheet().showSheet({
  42.             theme: 'wx',
  43.             titleText: '三秒后自动关闭',
  44.             buttons: [{
  45.                     text: '实例菜单'
  46.                 },
  47.                 {
  48.                     text: '实例菜单'
  49.                 },
  50.             ],
  51.             buttonClicked(index, item) {
  52.                 return true
  53.             },
  54.         })
  56.         this.timeout = setTimeout(hideSheet, 3000)
  57.     },
  58. })

视频演示

ActionSheet

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-actionsheet
options.theme string 菜单皮肤，可选值为 ios、wx ios
options.className string 自定义类名 -
options.titleText string 标题 -
options.buttons array 按钮 []
options.buttons[].text string 按钮的文本 -
options.buttons[].icon string 按钮的图标 -
options.buttons[].disabled boolean 是否禁用 false
options.buttons[].openType string 微信开放能力，可选值为 contact、share、getUserInfo、getPhoneNumber、launchApp、openSetting、feedback -
options.buttons[].hoverClass string 指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果 wux-actionsheet__button—hover
options.buttons[].hoverStopPropagation boolean 指定是否阻止本节点的祖先节点出现点击态 false
options.buttons[].hoverStartTime number 按住后多久出现点击态，单位毫秒 20
options.buttons[].hoverStayTime number 手指松开后点击态保留时间，单位毫秒 70
options.buttons[].lang string 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 en
options.buttons[].sessionFrom string 会话来源 -
options.buttons[].sendMessageTitle string 会话内消息卡片标题 当前标题
options.buttons[].sendMessagePath string 会话内消息卡片点击跳转小程序路径 当前分享路径
options.buttons[].sendMessageImg string 会话内消息卡片图片 截图
options.buttons[].showMessageCard boolean 显示会话内消息卡片 false
options.buttons[].appParameter string 打开 APP 时，向 APP 传递的参数 -
bind:getuserinfo function 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 -
bind:contact function 客服消息回调 -
bind:getphonenumber function 获取用户手机号回调 -
bind:error function 当使用开放能力时，发生错误的回调 -
bind:opensetting function 在打开授权设置页后回调 -
options.buttonClicked function 按钮点击事件，返回值为 true 时将会关闭组件 -
options.cancelText string 取消按钮的文本 取消
options.cancel function 取消按钮或蒙层点击事件 -
options.destructiveText string 删除按钮的文本 -
options.destructiveButtonClicked function 删除按钮点击事件 -

更多参数说明请参考微信官方的表单组件 Button。

ActionSheet.method

  • ActionSheet.showSheet
  • ActionSheet.removeSheet
  • ActionSheet.cancel

ActionSheet.showSheet 函数调用后，会返回一个引用，可以通过该引用手动关闭组件

  1. const hide = ActionSheet.showSheet()
  2. hide()