微信小程式 modal彈框元件詳解

微信小程式  modal彈框元件詳解

微信小程式  modal:

         這裡對微信小程式中 modal元件進行詳細解析,我想開發微信小程式的小夥伴可以用到,這裡小編就記錄下modal的知識要點。       

modal

modal類似於javascript中的confirm彈框,預設情況下是一個帶有確認取消的彈框,不過點選取消後彈框不會自動隱藏,需要通過觸發事件呼叫函式來控制hidden屬性。

官方文件

.wxml


<modal hidden="{{hidden}}" title="這裡是title" confirm-text="自定義確定按鈕" cancel-text="自定義取消按鈕" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
這是對話方塊的內容。
</modal>

.js


Page({
data:{
hidden:false,
nocancel:false
},
cancel: function(){
this.setData({
hidden: true
});
},
confirm: function(){
this.setData({
nocancel: !this.data.nocancel
});  
console.log("clicked confirm");
}
})    

執行效果

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支援!

您可能感興趣的文章:

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