小程序模板网

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

问题描述:

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

 

解决方案:

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

代码:

wxml:

 

				
  1. class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
  2. 我是遮罩层
  3.  
  4. style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
  5. 小程序弹出层点击穿透问题
  6. bindtap='showMask'>弹出遮罩层
  7.  

js:

 

				
  1. Page({
  2. data: {
  3. hasMask:false
  4. },
  5. showMask(e) {
  6. //显示遮罩
  7. this.setData({
  8. hasMask: true
  9. })
  10. },
  11. hideMask(e) {
  12. //隐藏遮罩
  13. this.setData({
  14. hasMask: false
  15. })
  16. }
  17. })

效果图:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24392.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询