微信小程序使用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ì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
JS FormData對(duì)象使用方法實(shí)例詳解
這篇文章主要介紹了JS FormData對(duì)象使用方法,結(jié)合實(shí)例形式詳細(xì)分析了FormData對(duì)象的基本功能、原理及使用方法,需要的朋友可以參考下2020-02-02
本篇文章主要介紹了Webpack執(zhí)行命令參數(shù)詳解 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js解決pdf使用iframe打印報(bào)跨域錯(cuò)誤問(wèn)題的方法示例
這篇文章主要給大家介紹了關(guān)于js解決pdf使用iframe打印報(bào)跨域錯(cuò)誤問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03
JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實(shí)例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問(wèn)題，具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
這篇文章主要介紹了移動(dòng)端橫屏的JS代碼(beta) 的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)
有時(shí)候我們需要在登陸表單有一些提示語(yǔ)言，比如“請(qǐng)輸入用戶名”和“請(qǐng)輸入密碼”等語(yǔ)言，通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)的相關(guān)知識(shí)，對(duì)js實(shí)現(xiàn)輸入框提示相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
打開(kāi)一個(gè)小程序，我們會(huì)發(fā)現(xiàn)，一般構(gòu)圖排版都是圖片banner - 快捷按鈕 - 產(chǎn)品/文章列表等詳細(xì)信息，底部導(dǎo)航一般是2~5個(gè)。這樣的排版是比較美觀的，那么為什么要這樣設(shè)計(jì)，這些輪播圖、快捷按鈕等小程序組件都有什么用呢？接下來(lái)就帶你詳細(xì)了解下2022-12-12
這篇文章主要為大家介紹了uniapp界面新增水印實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07