微信小程序-弹出对话框

最新推荐文章于 2025-03-11 11:06:15 发布

Python_林一

最新推荐文章于 2025-03-11 11:06:15 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/AndroidAlvin/article/details/103728679

版权

本文介绍了微信小程序中如何使用`wx.showModal`显示模态对话框，包括其参数配置、回调函数以及注意事项。对话框是小程序界面交互的一种方式，与toast等并列。在Android不同版本和iOS上，点击蒙层关闭模态的行为有所不同，需注意处理。示例代码展示了对话框的使用，并提及如何将信息传递到弹出界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

wx.showModal(Object object)

显示模态对话框

参数

Object object

object.success 回调函数

参数

Object res

示例代码

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

注意

Android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errMsg 为 "fail cancel"；
Android 6.7.2 及以上版本和 iOS 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑
怎么使用
下面是一个官方的使用方式，用触发时间来触发即可

<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/weixin_42514606/article/details/99250768