微信小程序使用modal組件彈出對話框功能示例

來源：懂視網責編：小采時間：2020-11-27 22:24:48

微信小程序使用modal組件彈出對話框功能示例

微信小程序使用modal組件彈出對話框功能示例:本文實例講述了微信小程序使用modal組件彈出對話框功能。分享給大家供大家參考，具體如下： 1、效果展示 2、關鍵代碼 ①、index.wxml <view>提示：{{tip}}</view> <button type=default bindtap=showMo

推薦度：

點擊下載本文 文檔為doc格式

導讀微信小程序使用modal組件彈出對話框功能示例:本文實例講述了微信小程序使用modal組件彈出對話框功能。分享給大家供大家參考，具體如下： 1、效果展示 2、關鍵代碼 ①、index.wxml <view>提示：{{tip}}</view> <button type=default bindtap=showMo

本文實例講述了微信小程序使用modal組件彈出對話框功能。分享給大家供大家參考，具體如下：

1、效果展示

2、關鍵代碼

①、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:'您點擊了【確認】按鈕！',
 buttonDisabled:!this.data.buttonDisabled
 })
 },
 modalBindcancel:function(){
 this.setData({
 modalHidden:!this.data.modalHidden,
 tip:'您點擊了【取消】按鈕！'
 })
 }
})

③、完整實例代碼點擊此處本站下載。

希望本文所述對大家微信小程序開發有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com