微信小程序-弹出对话框

叉叉敌

发布于 2019-08-15 20:07:42

6.4K00

代码可运行

文章被收录于专栏：ChasaysChasays

运行总次数：0

代码可运行

什么是对话框

对话框是微信小程序的，界面交互的一种方式，其他的还有toast等。

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

怎么使用

下面是一个官方的使用方式，用触发时间来触发即可

<view>
<button bindtap="showWindows" class="showWindows">弹窗</button>
</view>

showWindows: function() {
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
}

如何把信息传到弹出界面

在wxml文件里面 {{data.showWindows.Content}} 把内容传上去即可

<view>
  <button bindtap="bindViewTap">点击弹出对话框</button>
  <view >
    <modal title="对话框" hidden="{{modalHidden}}" confirm-text="确定"
    cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
      {{data.showWindows.Content}}
    </modal>
  </view>

//获取应用实例
var app = getApp()
Page({
  data: {
    modalHidden:true,//是否隐藏对话框
  },
  //事件处理函数
  bindViewTap: function() {
    this.setData({
      modalHidden:!this.data.modalHidden
    })
    
  },
  //确定按钮点击事件
  modalBindaconfirm:function(){
    this.setData({
      modalHidden:!this.data.modalHidden,
    })
  },
  //取消按钮点击事件
  modalBindcancel:function(){
    this.setData({
      modalHidden:!this.data.modalHidden,
    })
  },  
})