微信小程序 modal詳解及實例代碼
更新時間：2016年11月09日 10:53:35 投稿：lqh
這篇文章主要介紹了微信小程序 modal詳解及實例代碼的相關資料,需要的朋友可以參考下
微信小程序 開發(fā)文檔，相關文章：
微信小程序 modal
對話彈窗
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| title | String | 標題 | |
| hidden | Boolean | false | 是否隱藏整個彈窗 |
| no-cancel | Boolean | false | 是否隱藏cancel按鈕 |
| confirm-text | String | 確定 | confirm按鈕文字 |
| cancel-text | String | 取消 | cancel按鈕文字 |
| bindconfirm | EventHandle | 點擊確認觸發(fā)的回調(diào) | |
| bindcancel | EventHandle | 點擊取消以及蒙層觸發(fā)的回調(diào) |
示例：
<modal title="標題" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
這是對話框的內(nèi)容。
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
<view> 沒有標題沒有蒙層沒有確定的modal </view>
<view> 內(nèi)容可以插入節(jié)點 </view>
</modal>
<view class="btn-area">
<button type="default" bindtap="modalTap">點擊彈出modal</button>
<button type="default" bindtap="modalTap2">點擊彈出modal2</button>
</view>
Page({
data: {
modalHidden: true,
modalHidden2: true
},
modalTap: function(e) {
this.setData({
modalHidden: false
})
},
modalChange: function(e) {
this.setData({
modalHidden: true
})
},
modalTap2: function(e) {
this.setData({
modalHidden2: false
})
},
modalChange2: function(e) {
this.setData({
modalHidden2: true
})
},
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了微信小程序 Nginx環(huán)境配置詳細介紹的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序 五星評分的實現(xiàn)實例的相關資料,這里提供實現(xiàn)實例幫助大家實現(xiàn)改功能，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Java中的Script對象的相關資料,需要的朋友可以參考下文章里內(nèi)容2021-08-08
這篇文章主要介紹了微信小程序 選擇器（時間，日期，地區(qū)）實例詳解的相關資料,這里提供了實例代碼及實現(xiàn)效果圖，幫助大家學習理解這部分知識，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了JS實現(xiàn)頁面炫酷的時鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
強制設為首頁代碼...2006-06-06
JavaScript選擇器函數(shù)querySelector和querySelectorAll
這篇文章主要介紹了?JavaScript選擇器函數(shù)querySelector和querySelectorAll，下面文章圍繞querySelector和querySelectorAll的相關資料展開詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
微信小程序技巧之show內(nèi)容展示，上傳文件編碼問題
這篇文章主要介紹了微信小程序技巧之show內(nèi)容展示，上傳文件編碼問題，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
本文使用原生js的AudioContext接口實現(xiàn)一個劃過菜單播放天空之城的鼠標特效,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09