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

成都創(chuàng)新互聯(lián):從2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設”服務,為上千公司企業(yè)提供了專業(yè)的成都做網(wǎng)站、網(wǎng)站設計、網(wǎng)頁設計和網(wǎng)站推廣服務, 按需開發(fā)網(wǎng)站由設計師親自精心設計,設計的效果完全按照客戶的要求,并適當?shù)奶岢龊侠淼慕ㄗh,擁有的視覺效果,策劃師分析客戶的同行競爭對手,根據(jù)客戶的實際情況給出合理的網(wǎng)站構架,制作客戶同行業(yè)具有領先地位的。
代碼引入
在 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觸發(fā)的事件 | |
| bindactiontap | eventhandler | 否 | 點擊ActionSheet的按鈕項觸發(fā)的事件,detail為{ value, index } |
Slot
| 名稱 | 描述 |
|---|---|
| title | 標題區(qū)域slot |
新聞名稱:創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·操作按鈕組件
當前鏈接:http://m.fisionsoft.com.cn/article/cdojcje.html


咨詢
建站咨詢
