本文實例講述了微信小程序使用modal組件彈出對話框功能。分享給大家供大家參考,具體如下:
1、效果展示
2、關鍵代碼
①、index.wxml
<view>提示:{{tip}}</view><button type="default" bindtap="showModal">點擊我彈出modal對話框</button><view> <modal title="modal對話框" hidden="{{modalHidden}}" confirm-text="確定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal對話框</modal></view>
②、index.js
Page({ data:{ // text:"這是一個頁面" tip:'', buttonDisabled:false, modalHidden:true, show:false }, showModal:function(){ this.setData({ modalHidden:!this.data.modalHidden }) }, modalBindaconfirm:function(){ this.setData({ modalHidden:!this.data.modalHidden, show:!this.data.show, tip:'您點擊了【確認】按鈕!', buttonDisabled:!this.data.buttonDisabled }) }, modalBindcancel:function(){ this.setData({ modalHidden:!this.data.modalHidden, tip:'您點擊了【取消】按鈕!' }) }})
③、完整實例代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答