vant小程序版弹窗穿透滚动的解决方案

vant小程序版弹窗穿透滚动的解决方案

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />

<van-popup show="{{ show }}" catch:touchstart />

注意

• page-meta 只能放到页面第一行
• page-style的变量判断，show泛指popup的show变量，如果一个页面有多个popup，那就用逻辑或判断（如page-style="{{ (show|| show2|| show3) ? 'overflow: hidden;' : '' }}" ）