1. 程式人生 > >關於微信小程序 modal彈框組件的介紹

關於微信小程序 modal彈框組件的介紹

隱藏 table add XML 微信小程序 小夥伴 自動 tle console

微信小程序 modal:

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

modal

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

官方文檔

技術分享圖片

.wxml

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

.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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彈框組件的介紹