• ActionSheet
    • 代码引入
    • 示例代码
    • 效果展示
    • 属性列表
    • Slot

    ActionSheet

    底部弹起的操作按钮组件

    代码引入

    在 page.json 中引入组件

    1. {
    2.   "usingComponents": {
    3.     "mp-actionsheet": "../../components/actionsheet/actionsheet"
    4.   }
    5. }

    示例代码

    1. <!--WXML示例代码-->
    2. <mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{actions}}" title="这是一个标题，可以为一行或者两行。">
    3. </mp-actionSheet>
    1. Page({
    2.     data: {
    3.         showActionsheet: false,
    4.         groups: [
    5.             { text: '示例菜单', value: 1 },
    6.             { text: '示例菜单', value: 2 },
    7.             { text: '负向菜单', type: 'warn', value: 3 }
    8.         ]
    9.     },
    10.     close: function () {
    11.         this.setData({
    12.             showActionsheet: false
    13.         })
    14.     },
    15.     btnClick(e) {
    16.         console.log(e)
    17.         this.close()
    18.     }
    19. })

    效果展示

    ActionSheet - 图1

    属性列表

    属性类型默认值必填说明
    titlestring否标题
    show-cancelbooleantrue否是否显示取消按钮
    cancel-textstring否取消按钮的文本
    mask-classstring否背景蒙层的class
    ext-classstring否ActionSheet额外的class
    mask-closablebooleantrue否点击背景蒙层是否可以关闭ActionSheet
    maskbooleantrue否是否显示背景蒙层
    showbooleanfalse否是否显示ActionSheet
    actionsArrayfalse是ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式
    bindcloseeventhandler否点击背后的mask关闭掉ActionSheet触发的事件
    bindactiontapeventhandler否点击ActionSheet的按钮项触发的事件，detail为{ value, index }

    Slot

    名称描述
    title标题区域slot