vant小程序版弹窗穿透滚动的解决方案
2026/7/13 18:21:54 网站建设 项目流程

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

禁止滚动穿透

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

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

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

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

注意

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

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询