小程式踩坑日誌(二)--modal的使用
阿新 • • 發佈:2018-12-23
小程式踩坑日誌(二)
小程式彈出框modal的使用
modal彈出框經常用在提示一些資訊,比如退出應用,清除快取,修改資料。
常用屬性
屬性名 | 預設值 | 說明 |
---|---|---|
title | 標題 | |
hidden | false | 是否隱藏整個彈窗 |
no-cancel | false | 是否隱藏cancel按鈕 |
confirm-text | 確定 | confirm按鈕文字 |
cancel-text | 取消 | cancel按鈕文字 |
bindconfirm | 點選確認觸發的回撥 | |
bindcancel | 點選取消以及遮罩層觸發的回撥 |
index.wxml
<!--監聽button點選事件-->
<button bindtap="listenerButton" type="primary">彈出modal</button>
<!--彈出框-->
<modal
title="退出應用"
hidden="{{hiddenModal}}"
confirm-text="再看看"
cancel-text="退出"
bindconfirm="listenerConfirm"
bindcancel="listenerCancel" >
您是否真的要退出應用
</modal>
index.js
Page({
data:{
// text:"這是一個頁面"
hiddenModal: true
},
listenerButton:function() {
this.setData({
hiddenModal: !this.data.hiddenModal
})
},
listenerConfirm:function() {
this.setData({
hiddenModal: true
})
},
listenerCancel:function() {
this.setData({
hiddenModal: true
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的引數
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})