微信小程序实现当前页面点击指定文字图片弹出弹窗,再点击空白处消失
在制作微信小程序的时候,我们不免要实现弹窗功能,在当前页面弹出,再在当前页面点击空白处弹窗消失,可要如何实现呢?
例如制作效果
未点击前:
点击后:(点击问号,随之蹦出弹窗解释)
在点击其他地方时,弹窗将会消失。恢复到最开始的样子
实现的依据就是事件的非冒泡
事件以及冒泡事件
实现的思想就是蒙层添加点击隐藏事件,然后为蒙层子节点的设置阻止冒泡的事件。
wxml页面
<view class="main" bindtap="back"> //关键点
<view class="header">
<view class="header-left" catchtap="eduBulletFrame">点击这里 //关键点
<text class="iconfont icon-wenhao" catchtap="eduBulletFrame"></text>
</view>
<view class="explanation" wx:if="{{ifBulletFrame}}" catchtap="eduBulletFrame"> //关键点
<image src="../../img/background.png" class="explanationImg"></image>
<text class="explanationText">这里有一个ACE,名字叫孟佳。</text>
</view>
<view class="header-right" hidden="{{ifBulletFrame}}">详情
</view>
</view>
</view>
js
eduBulletFrame(e) {
let ifBulletFrame = this.data.ifBulletFrame //控制显示的参数
if (ifBulletFrame == false) {
this.setData({
ifBulletFrame: true,
})
} else {
this.setData({
ifBulletFrame: false
})
}
},
//退出页面
back(e) {
this.setData({
ifBulletFrame: false,
})
},
具体思路如下:
添加控制显示点击事件。首先使用catchtap 在你需要点击的地方添加,使用他来阻止外层事件的发生,不会触发大盒子上面的事件;再在你弹窗的地方使用wx:if(或者是hidden都可以),根据上面的catchtap事件使用参数控制是否显示;
添加点击其他地方弹窗消失点击事件。在最外面的大盒子上面使用bindtap,只要你点击这个里面的地方都会触发这个事件,而达到返回的目的。
最终显示效果:
原文链接:https://blog.csdn.net/weixin_44520823/article/details/112253477
事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。
key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。
value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中,点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
Page({
handleTap1:function(event){ //点击输出outer view bindtap
console.log("outer view bindtap")
},
handleTap2: function (event) { //点击输出middle view
console.log("middle view catchtap")
},
handleTap3: function (event) { //点击输出inner view bindtap middle view catchtap
console.log("inner view bindtap")
},
})
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" bindtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
Page({
handleTap1:function(event){
//点击输出outer view bindtap
console.log("outer view bindtap")
},
handleTap2: function (event) {
//点击输出outer view bindtap middle view
console.log("middle view catchtap")
},
handleTap3: function (event) {
//点击输出outer view bindtap inner view bindtap middle view catchtap
console.log("inner view bindtap")
},}
)