微信小程序使用modal组件弹出对话框功能示例

本文实例讲述了微信小程序使用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:\'您点击了【取消】按钮！\'
  })
 }
})

③、完整实例代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。