Skip to content

Latest commit

 

History

History
100 lines (91 loc) · 2.94 KB

微信小程序-弹出对话框.md

File metadata and controls

100 lines (91 loc) · 2.94 KB

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