actionsheet.md

actionsheet(options)

上拉菜单

参数	类型	描述
options	object	配置项
options.theme	string	菜单皮肤
options.className	string	自定义类名
options.titleText	string	标题
options.buttons	array	按钮
options.buttons[].text	string	按钮的文本
options.buttonClicked	function	按钮点击事件
options.cancelText	string	取消按钮的文本
options.cancel	function	取消按钮点击事件
options.destructiveText	string	删除按钮的文本
options.destructiveButtonClicked	function	删除按钮点击事件

Example

<import src="../../components/actionsheet/actionsheet.wxml"/>

<template is="actionsheet" data="{{ ...$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">
        <view class="weui-btn-area">
            <button class="weui-btn" type="default" bindtap="showActionSheet1">原生 ActionSheet</button>
            <button class="weui-btn" type="default" bindtap="showActionSheet2">iOS ActionSheet</button>
            <button class="weui-btn" type="default" bindtap="showActionSheet3">wx ActionSheet</button>
        </view>
    </view>
</view>

import { $wuxActionSheet } from '../../components/wux'

Page({
    data: {},
    onLoad() {},
    showActionSheet1() {
        wx.showActionSheet({
            itemList: ['实例菜单', '实例菜单']
        })
    },
    showActionSheet2() {
        $wuxActionSheet.show({
            titleText: '自定义操作',
            buttons: [
                { 
                    text: 'Go Dialog' 
                },
                { 
                    text: 'Go Toast' 
                },
            ],
            buttonClicked(index, item) {
                index === 0 && wx.navigateTo({
                    url: '/pages/dialog/index'
                })

                index === 1 && wx.navigateTo({
                    url: '/pages/toast/index'
                })
                
                return true
            },
            cancelText: '取消',
            cancel() {},
            destructiveText: '删除',
            destructiveButtonClicked() {},
        })
    },
    showActionSheet3() {
        if (this.timeout) clearTimeout(this.timeout)

        const hideSheet = $wuxActionSheet.show({
            theme: 'wx', 
            titleText: '三秒后自动关闭',
            buttons: [
                { 
                    text: '实例菜单' 
                },
                { 
                    text: '实例菜单' 
                },
            ],
            buttonClicked(index, item) {
                return true
            },
        })

        this.timeout = setTimeout(hideSheet, 3000)
    },
})