微信小程序 modal詳解及實(shí)例代碼

2019-11-19 19:00:27

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

微信小程序開發(fā)文檔，相關(guān)文章：

微信小程序 modal

對(duì)話彈窗

屬性名	類型	默認(rèn)值	說明
title	String		標(biāo)題
hidden	Boolean	false	是否隱藏整個(gè)彈窗
no-cancel	Boolean	false	是否隱藏cancel按鈕
confirm-text	String	確定	confirm按鈕文字
cancel-text	String	取消	cancel按鈕文字
bindconfirm	EventHandle		點(diǎn)擊確認(rèn)觸發(fā)的回調(diào)
bindcancel	EventHandle		點(diǎn)擊取消以及蒙層觸發(fā)的回調(diào)

示例：

<modal title="標(biāo)題" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange"> 這是對(duì)話框的內(nèi)容。</modal><modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"> <view> 沒有標(biāo)題沒有蒙層沒有確定的modal </view> <view> 內(nèi)容可以插入節(jié)點(diǎn) </view></modal><view class="btn-area"> <button type="default" bindtap="modalTap">點(diǎn)擊彈出modal</button> <button type="default" bindtap="modalTap2">點(diǎn)擊彈出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 }) },})