@wines/actionsheet

ActionSheet 上拉菜单

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "ActionSheet",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-actionsheet": "@wines/actionsheet"
  }
}

import './index.less';
import { $wuxActionSheet } from '@wines/actionsheet';

Page({
  data: {},
  onLoad() {
    /** */
  },
  showActionSheet1() {
    void wx.showActionSheet({
      itemList: ['实例菜单', '实例菜单'],
    });
  },
  timeout: 0 as number,
  showActionSheet3() {
    if (this.timeout) clearTimeout(this.timeout);
    const hideSheet = $wuxActionSheet().showSheet({
      titleText: '三秒后自动关闭',
      buttons: [
        {
          text: '实例菜单',
        },
        {
          text: '实例菜单',
        },
      ],
      buttonClicked() {
        return true;
      },
    });
    this.timeout = setTimeout(() => {
      hideSheet();
    }, 3000);
  },
});

示例

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

<wux-actionsheet id="wux-actionsheet" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">ActionSheet</view>
		<view class="page__desc">上拉菜单</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="showActionSheet1">原生 ActionSheet</wux-button>
		<wux-button block type="light" bind:click="showActionSheet3">wx ActionSheet</wux-button>
	</view>
</view>

API

| 参数 | 类型 | 描述 | 默认值 | | -------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------- | -------------------------------- | | options | object | 配置项 | - | | options.prefixCls | string | 自定义类名前缀 | wux-actionsheet | | 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 函数调用后，会返回一个引用，可以通过该引用手动关闭组件

const hide = ActionSheet.showSheet()
hide()