WeChat small program WeUI operation button component

May 21, 2021 WeChat Mini Program Development Document

1. Code introduction

2. The sample code

3. The effect is displayed

4. The list of properties

5. Slot

ActionSheet

The operation button assembly that bounces from the bottom

Code introduction

Introduce components in page.json

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

The sample code

<!--WXML示例代码-->
<mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{groups}}" title="这是一个标题，可以为一行或者两行。">
</mp-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()
    }
})

The effect is displayed

WeChat small program WeUI operation button component

The list of properties

Property	Type	The default	Required	Description
title	string		Whether	Title
show-cancel	boolean	true	Whether	Whether to display the cancel button
cancel-text	string		Whether	The text of the cancel button
mask-class	string		Whether	The class of the background mask
ext-class	string		Whether	ActionSheet extraclass
mask-closable	boolean	true	Whether	Click on whether the background mask can turn off ActionSheet
mask	boolean	true	Whether	Whether the background mask is displayed
show	boolean	false	Whether	Whether actionSheet is displayed
actions	Array	false	Is	ActionSheet's button items are configured, each containing text, value, type Object, type, which takes warn and default, representing two styles
bindclose	eventhandler		Whether	Click on the mask behind to turn off actionSheet-triggered events
bindactiontap	eventhandler		Whether	Click on actionSheet's button item to trigger the event, the detail is the value, index .

Slot

Name	Describe
title	The title area slot

WeChat small program WeUI operation button component

Table of contents

ActionSheet

Code introduction

The sample code

The effect is displayed

The list of properties

Slot

Cookie Consent