微信小程式 modal元件詳細介紹

微信小程式 modal元件詳細介紹

modal彈出框常用在提示一些資訊比如:退出應用,清楚快取,修改資料提交時一些提示等等。

常用屬性:

wxml


<!--監聽button點選事件-->
<button bindtap="listenerButton" type="primary">彈出modal</button>
<!--彈出框-->
<modal 
title="退出應用"
hidden="{{hiddenModal}}"
confirm-text="再看看"
cancel-text="退出"
bindconfirm="listenerConfirm"
bindcancel="listenerCancel" >
您是否真的要退出應用
</modal>

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(){
// 頁面關閉
}
})

相關文章:

hello WeApp                      icon元件
Window 
                            text元件                                switch元件
tabBar底部導航                 progress元件                        action-sheet
應用生命週期                    button元件                            modal元件
頁面生命週期
                    checkbox元件                       toast元件
模組化詳                           form元件詳                            loading 元件
資料繫結
                           input 元件                             navigator 元件
View元件                          picker元件                             audio 元件
scroll-view元件                 radio元件                              video元件
swiper元件                        slider元件                              Image元件

您可能感興趣的文章:

微信小程式 modal詳解及例項程式碼微信小程式 modal彈框元件詳解微信小程式自定義模態對話方塊例項詳解微信小程式 自定義對話方塊例項詳解微信小程式tabBar模板用法例項分析【附demo原始碼下載】微信小程式自定義toast實現方法詳解【附demo原始碼下載】微信小程式使用者自定義模版用法例項分析微信小程式模板和模組化用法例項分析微信小程式 傳值取值的幾種方法總結微信小程式 引數傳遞詳解微信小程式使用modal元件彈出對話方塊功能示例