在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。面对这个bug，我们可以用下面几种方法实现：文章来源：https://www.toymoban.com/news/detail-580999.html
方法1：catchtouchmove=“true”
可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。
如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。
ps：开发工具测试无效，真机上有效文章来源地址https://www.toymoban.com/news/detail-580999.html
<!-- 页面 -->
<view class="page">
<button bindtap="showAction">点击出现弹框</button>
</view>
<!-- 弹框 -->
<view catchtouchmove="true">
<view class="mask" wx:if="{{popup}}"></view>
<view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}"></view>
</view>
.page {
width: 100%;
height: 20000rpx;
background-color: pink;
}
方法2：使用scroll-view包裹底部内容区
<!-- 页面 -->
<scroll-view class="page" scroll-y="{{true}}" scroll-x="{{false}}" enhanced="{{true}}" bounces="{{false}}">
<view style="height: 3000rpx;background: green;">
<button bindtap="showAction">点击出现弹框</button>
</view>
</scroll-view>
<!-- 弹框 -->
<view>
<view class="mask" wx:if="{{popup}}"></view>
<view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}">
<view style="height: 3000rpx;background: red;"></view>
</view>
</view>
.page {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
方法3：弹框出现的时候，将底部背景页面的高度设置为100vh
<!-- 页面 -->
<view class="{{popup ? 'page-overflow-hidden' : ''}}">
<view style="height: 3000rpx;background: green;">
<button bindtap="showAction">点击出现弹框</button>
</view>
</view>
<!-- 弹框 -->
<view>
<view class="mask" wx:if="{{popup}}"></view>
<view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}">
<view style="height: 3000rpx;background: red;"></view>
</view>
</view>
.page-overflow-hidden {
height: 100vh;
overflow: hidden;
}
相同的弹框样式如下：
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.half-screen-dialog {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 75%;
z-index: 5000;
line-height: 1.4;
background-color: #FFFFFF;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow-y: auto;
transition: transform .3s;
transform: translateY(100%);
}
.half-screen-dialog_show {
transform: translateY(0%);
}
相同的js如下：
Page({
data: {
popup: false
},
showAction() {
this.setData({
popup: true
});
},
})
到了这里，关于微信小程序 - 解决弹框遮罩层的滚动穿透问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
