微信小程式 modal詳解及例項程式碼

NO IMAGE

微信小程式 開發文件,相關文章:

微信小程式  action-sheet

微信小程式 modal

微信小程式 toast

微信小程式 loading

微信小程式 modal

對話彈窗

屬性名型別預設值說明
titleString 標題
hiddenBooleanfalse是否隱藏整個彈窗
no-cancelBooleanfalse是否隱藏cancel按鈕
confirm-textString確定confirm按鈕文字
cancel-textString取消cancel按鈕文字
bindconfirmEventHandle 點選確認觸發的回撥
bindcancelEventHandle 點選取消以及蒙層觸發的回撥

示例:


<modal title="標題" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
這是對話方塊的內容。
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
<view> 沒有標題沒有蒙層沒有確定的modal </view>
<view> 內容可以插入節點 </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
})
},
})

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支援!

您可能感興趣的文章:

微信小程式 modal彈框元件詳解微信小程式 modal元件詳細介紹微信小程式自定義模態對話方塊例項詳解微信小程式 自定義對話方塊例項詳解微信小程式tabBar模板用法例項分析【附demo原始碼下載】微信小程式自定義toast實現方法詳解【附demo原始碼下載】微信小程式使用者自定義模版用法例項分析微信小程式模板和模組化用法例項分析微信小程式 傳值取值的幾種方法總結微信小程式 引數傳遞詳解微信小程式使用modal元件彈出對話方塊功能示例