标签：程序实现 微信 ifBulletFrame 点击 事件 弹窗 页面

微信小程序实现当前页面点击指定文字图片弹出弹窗，再点击空白处消失

在制作微信小程序的时候，我们不免要实现弹窗功能，在当前页面弹出，再在当前页面点击空白处弹窗消失，可要如何实现呢？

例如制作效果
未点击前：

点击后：（点击问号，随之蹦出弹窗解释）

在点击其他地方时，弹窗将会消失。恢复到最开始的样子

实现的依据就是事件的非冒泡
事件以及冒泡事件
实现的思想就是蒙层添加点击隐藏事件，然后为蒙层子节点的设置阻止冒泡的事件。

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,
    })
  },

具体思路如下：

1. 添加控制显示点击事件。首先使用catchtap 在你需要点击的地方添加，使用他来阻止外层事件的发生，不会触发大盒子上面的事件；再在你弹窗的地方使用wx:if(或者是hidden都可以)，根据上面的catchtap事件使用参数控制是否显示；
2. 添加点击其他地方弹窗消失点击事件。在最外面的大盒子上面使用bindtap，只要你点击这个里面的地方都会触发这个事件，而达到返回的目的。

最终显示效果：

如果有问题，欢迎一起讨论，共同进步！初学微信小程序，有问题请指出，谢谢~

标签：程序实现,微信,ifBulletFrame,点击,事件,弹窗,页面
来源： https://blog.csdn.net/weixin_44520823/article/details/112253477

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。