新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·操作按鈕組件
ActionSheet
底部彈起的操作按鈕組件

成都創(chuàng)新互聯(lián):從2013年成立為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù),為上千公司企業(yè)提供了專(zhuān)業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù), 按需開(kāi)發(fā)網(wǎng)站由設(shè)計(jì)師親自精心設(shè)計(jì),設(shè)計(jì)的效果完全按照客戶(hù)的要求,并適當(dāng)?shù)奶岢龊侠淼慕ㄗh,擁有的視覺(jué)效果,策劃師分析客戶(hù)的同行競(jìng)爭(zhēng)對(duì)手,根據(jù)客戶(hù)的實(shí)際情況給出合理的網(wǎng)站構(gòu)架,制作客戶(hù)同行業(yè)具有領(lǐng)先地位的。
代碼引入
在 page.json 中引入組件
{
"usingComponents": {
"mp-actionSheet": "../../components/actionsheet/actionsheet"
}
}
示例代碼
Page({
data: {
showActionsheet: false,
groups: [
{ text: '示例菜單', value: 1 },
{ text: '示例菜單', value: 2 },
{ text: '負(fù)向菜單', type: 'warn', value: 3 }
]
},
close: function () {
this.setData({
showActionsheet: false
})
},
btnClick(e) {
console.log(e)
this.close()
}
})
效果展示
屬性列表
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| title | string | 否 | 標(biāo)題 | |
| show-cancel | boolean | true | 否 | 是否顯示取消按鈕 |
| cancel-text | string | 否 | 取消按鈕的文本 | |
| mask-class | string | 否 | 背景蒙層的class | |
| ext-class | string | 否 | ActionSheet額外的class | |
| mask-closable | boolean | true | 否 | 點(diǎn)擊背景蒙層是否可以關(guān)閉ActionSheet |
| mask | boolean | true | 否 | 是否顯示背景蒙層 |
| show | boolean | false | 否 | 是否顯示ActionSheet |
| actions | Array | false | 是 | ActionSheet的按鈕項(xiàng)的配置,每一項(xiàng)是包含text、value、type的Object,type的取值為warn和default,表示兩種樣式 |
| bindclose | eventhandler | 否 | 點(diǎn)擊背后的mask關(guān)閉掉ActionSheet觸發(fā)的事件 | |
| bindactiontap | eventhandler | 否 | 點(diǎn)擊ActionSheet的按鈕項(xiàng)觸發(fā)的事件,detail為{ value, index } |
Slot
| 名稱(chēng) | 描述 |
|---|---|
| title | 標(biāo)題區(qū)域slot |
文章題目:創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·操作按鈕組件
標(biāo)題鏈接:http://www.dlmjj.cn/article/cdojcje.html


咨詢(xún)
建站咨詢(xún)
