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