微信小程序-弹出对话框

阳光穿透心脏的1/2处 2021-11-01 14:06 642阅读 0赞

# 什么是对话框 #

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

> [https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html][https_developers.weixin.qq.com_miniprogram_dev_api_ui_interaction_wx.showModal.html]

# 怎么使用 #

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

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][https_blog.csdn.net_hezhixiu_article_details_75309359]

[https_developers.weixin.qq.com_miniprogram_dev_api_ui_interaction_wx.showModal.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
[https_blog.csdn.net_hezhixiu_article_details_75309359]: https://blog.csdn.net/hezhixiu/article/details/75309359