微信小程序-弹出对话框

什么是对话框

对话框是微信小程序的,界面交互的一种方式,其他的还有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,
    })
  },  
})

部分可以参见这个 https://blog.csdn.net/hezhixiu/article/details/75309359

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券