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

问题描述:使用小程序的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
})
}
})

  

效果图:

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

上一篇:微信小程序弹出可填写框两种方法


下一篇:Dictionary 序列化与反序列化