@wines/actionsheet v1.5.1

@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

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

ActionSheet.method

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

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

const hide = ActionSheet.showSheet()
hide()