如何彻底解决微信小程序滚动穿透问题

在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下依然会导致滚动穿透，今天分享两个永久解决该问题的方法。

第一种方式：

使用官方的page-meta组件，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
原理：通过该组件我们可以直接设置Page组件样式，我们给它的wxss样式overflow动态设置hidden / auto 就可以控制整个页面是否可以滚动。

示例代码：

<page-meta page-style="overflow: {{visible ? 'hidden' : 'auto'}}" />

兼容底部是scroll-view，以及弹窗内是scroll-view都不会穿透影响底部的内容。

第二种方式：

使用微信提供的方法动态设置Page页面的样式，该组件未在官方文档内展示出来，实测可用：

wx.setPageStyle({
   style: {
     overflow: 'hidden'
   }
})

老规矩，结尾放代码片段：

https://developers.weixin.qq.com/s/U6ItgQmP7upQ

需要注意的是支付宝小程序同样有page-meta组件，但是支付宝的page-meta组件设置Page样式overflow: hidden却不会生效，经过与官方该组件的开发同学沟通，了解到是因为支付宝小程序使用的UC内核版本太低，导致给Page（相当于h5的body）设置overflow: hidden无效。