问题描述:使用小程序的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 }) } })
效果图:
请发表评论