微信 小程序弹框 简单实现
我也是 刚刚学小程序 就是想把 所学的记录下来
有二种 方式 先说 第一种 wx.showModa 弹框 ,点击遮罩部分不消失,
首先 是一个简单的布局了
复上代码
<button bindtap=‘showMask’ 弹框点击遮罩部分消失</button
<button bindtap=‘showtip’ 点击遮罩部分不消失</button
然后 在 js
复上代码
showtip: function() {
wx.showModal({
title: ‘弹框提示’, //提示
content: ‘这是内容’, //提示的内容
confirmText: “确认”, //确认按钮 不设置 有默认值 取消和确认
cancelText: “取消”, //取消按钮
success: function(res) { //这个 就相当于 监听弹框的按钮
if (res.confirm) { //去判断 点击的确认
console.log(“已经删除”)
}
if (res.cancel) { //取消
console.log(“取消删除”)
}
}
})
},
好了,对就是怎么简单
第二种 是
微信小程序 之–弹框组件 modal 点击遮罩部分消失
添加链接描述
看 属性都有
复上 代码
我的内容
复上代码
data: {
hasMask: false,
},
showMask(e) {
//显示遮罩
this.setData({
hasMask: true
})
},
hideMask(e) {
//隐藏遮罩
this.setData({
hasMask: false
})
},
confirm: function () {
console.log(“确认”)
},
cancel: function () {
console.log(“取消”)
},
好了 就怎么简单