189 8069 5689

创新互联小程序教程：微信小程序WeUI·操作按钮组件

ActionSheet

底部弹起的操作按钮组件

成都创新互联：从2013年成立为各行业开拓出企业自己的“网站建设”服务，为上千公司企业提供了专业的成都做网站、网站设计、网页设计和网站推广服务， 按需开发网站由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

代码引入

在 page.json 中引入组件

{
  "usingComponents": {
    "mp-actionSheet": "../../components/actionsheet/actionsheet"
  }
}

示例代码





Page({
    data: {
        showActionsheet: false,
        groups: [
            { text: '示例菜单', value: 1 },
            { text: '示例菜单', value: 2 },
            { text: '负向菜单', type: 'warn', value: 3 }
        ]
    },
    close: function () {
        this.setData({
            showActionsheet: false
        })
    },
    btnClick(e) {
        console.log(e)
        this.close()
    }
})

效果展示

属性列表

属性 类型 默认值 必填 说明
title string 否 标题
show-cancel boolean true 否 是否显示取消按钮
cancel-text string 否 取消按钮的文本
mask-class string 否 背景蒙层的class
ext-class string 否 ActionSheet额外的class
mask-closable boolean true 否 点击背景蒙层是否可以关闭ActionSheet
mask boolean true 否 是否显示背景蒙层
show boolean false 否 是否显示ActionSheet
actions Array false 是 ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式
bindclose eventhandler 否 点击背后的mask关闭掉ActionSheet触发的事件
bindactiontap eventhandler 否 点击ActionSheet的按钮项触发的事件，detail为{ value, index }

Slot

名称 描述
title 标题区域slot


文章名称：创新互联小程序教程：微信小程序WeUI·操作按钮组件
当前URL：http://cdxtjz.cn/article/cdojcje.html

其他资讯