如何彻底解决小程序滚动穿透问题
前言：我们在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。
使用官方的page-meta组件，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。
[图片]
示例代码：
[代码]<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 模拟弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
<view class="dialog-back {{visible ? 'active' : ''}}"></view>
<view class="share-box-container {{visible ? 'active' : ''}}">
<view class="share-content">
<!-- 模拟弹窗内容滚动 -->
<view class="share-box" wx:for="{{300}}" wx:key="index">{{item}}</view>
</view>
</view>
</view>
[代码]
控制弹窗显隐藏：
[代码]const app = getApp()
Page({
data: {
visible: false
},
onLoad() {
},
handleClick() {
this.setData({
visible: !this.data.visible
})
}
})
[代码]
wxss弹窗样式太多，这里就不贴，放代码片段里了。
兼容底部是scroll-view，以及弹窗内是scroll-view都不会穿透影响底部的内容。
[图片]
第二种方案：
调用这个api，动态设置它为hidden/visible，用于控制页面是否可滚动
[代码]wx.setPageStyle({
style: {
overflow: 'hidden'
}
})
[代码]
老规矩，结尾放代码片段：
https://developers.weixin.qq.com/s/U6ItgQmP7upQ
