微信小程序使用modal組件彈出對(duì)話框功能示例
更新時(shí)間:2017年11月29日 14:57:50 作者:FutrueJet
這篇文章主要介紹了微信小程序使用modal組件彈出對(duì)話框功能,結(jié)合實(shí)例形式分析了微信小程序model組件相關(guān)屬性及事件響應(yīng)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序使用modal組件彈出對(duì)話框功能。分享給大家供大家參考,具體如下:
1、效果展示

2、關(guān)鍵代碼
①、index.wxml
<view>提示:{{tip}}</view>
<button type="default" bindtap="showModal">點(diǎn)擊我彈出modal對(duì)話框</button>
<view>
<modal title="modal對(duì)話框" hidden="{{modalHidden}}" confirm-text="確定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal對(duì)話框</modal>
</view>
②、index.js
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
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:'您點(diǎn)擊了【確認(rèn)】按鈕!',
buttonDisabled:!this.data.buttonDisabled
})
},
modalBindcancel:function(){
this.setData({
modalHidden:!this.data.modalHidden,
tip:'您點(diǎn)擊了【取消】按鈕!'
})
}
})
③、完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
vscode使用Prettier Code插件的詳細(xì)教程
這篇文章主要介紹了vscode使用Prettier Code插件的詳細(xì)教程,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
JavaScript?評(píng)測(cè)代碼運(yùn)行速度的案例代碼
在?JavaScript?中,可以使用?performance.now()?API?來(lái)評(píng)測(cè)代碼的運(yùn)行速度。該?API?返回當(dāng)前頁(yè)面的高精度時(shí)間戳,您可以在代碼執(zhí)行前后調(diào)用它來(lái)計(jì)算代碼執(zhí)行所需的時(shí)間,這篇文章主要介紹了JavaScript?評(píng)測(cè)代碼運(yùn)行速度,需要的朋友可以參考下2023-02-02
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢?2011-01-01
two.js之實(shí)現(xiàn)動(dòng)畫效果示例
本篇文章主要介紹了two.js之實(shí)現(xiàn)動(dòng)畫效果示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-11
JavaScript實(shí)現(xiàn)二叉樹層序遍歷
這篇文章主要為大家簡(jiǎn)單介紹一下JS中如何實(shí)現(xiàn)二叉樹層序遍歷,感興趣的小伙伴可以詳細(xì)參考閱讀2023-03-03

