微信小程序弹出层点击穿透问题

最新推荐文章于 2025-06-16 14:12:13 发布

weixin_34228662

最新推荐文章于 2025-06-16 14:12:13 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangym118/p/8946595.html

本文介绍了解决小程序中遮罩层点击穿透问题的方法，通过动态调整底层页面的CSS属性来防止遮罩层后的页面被误触。具体做法是在显示遮罩层时，为底层页面添加position:fixed样式。

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

问题描述：使用小程序的modal组件实现遮罩层效果时，会出现滚动穿透的问题，即遮罩层后面的页面依旧可以滚动。

解决方案：

　　给底层页面动态添加 position:fixed;

代码：

wxml：

<modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
    我是遮罩层
</modal>
<view style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
    小程序弹出层点击穿透问题
    <button bindtap='showMask'>弹出遮罩层</button>
</view>

js：

Page({

  data: {
    hasMask:false
  },

  showMask(e) {
    //显示遮罩
    this.setData({
      hasMask: true
    })
  },
  hideMask(e) {
    //隐藏遮罩
    this.setData({
      hasMask: false
    })
  }
}）

效果图：