微信小程序使用modal組件彈出對話框功能示例
更新時間：2017年11月29日 14:57:50 作者：FutrueJet
這篇文章主要介紹了微信小程序使用modal組件彈出對話框功能,結(jié)合實例形式分析了微信小程序model組件相關(guān)屬性及事件響應(yīng)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序使用modal組件彈出對話框功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
①、index.wxml
<view>提示：{{tip}}</view>
<button type="default" bindtap="showModal">點(diǎn)擊我彈出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:'您點(diǎn)擊了【確認(rèn)】按鈕！',
buttonDisabled:!this.data.buttonDisabled
})
},
modalBindcancel:function(){
this.setData({
modalHidden:!this.data.modalHidden,
tip:'您點(diǎn)擊了【取消】按鈕！'
})
}
})
③、完整實例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
這篇文章主要介紹了淺談document.write()輸出樣式，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
vscode使用Prettier Code插件的詳細(xì)教程
這篇文章主要介紹了vscode使用Prettier Code插件的詳細(xì)教程,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
本文主要對JavaScript中定義對象原型的兩種使用方法進(jìn)行介紹，具有很好的參考價值，下面就跟小編一起來看下吧2016-12-12
下面小編就為大家?guī)硪黄钊肜斫鈐s promise chain。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在?JavaScript?中，可以使用?performance.now()?API?來評測代碼的運(yùn)行速度。該?API?返回當(dāng)前頁面的高精度時間戳，您可以在代碼執(zhí)行前后調(diào)用它來計算代碼執(zhí)行所需的時間，這篇文章主要介紹了JavaScript?評測代碼運(yùn)行速度,需要的朋友可以參考下2023-02-02
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢？2011-01-01
本篇文章主要介紹了two.js之實現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了JavaScript中如何計算字符串文本的寬度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本篇文章主要介紹了詳解JS中遍歷語法的比較 ，主要介紹for循環(huán)、forEach、for...in、for...of的用法和缺點(diǎn)，有興趣的可以了解一下。2017-04-04
這篇文章主要為大家簡單介紹一下JS中如何實現(xiàn)二叉樹層序遍歷，感興趣的小伙伴可以詳細(xì)參考閱讀2023-03-03