vant 组件-van-popup 组件滚动穿透(scroll chaining)

5/1/2021 微信小程序Vant

WX20210501-185136@2x

# 问题描述

当页面出现浮层(例如 popup 弹窗类型组件),在滑动浮层内的内容时候,浮层下的页面内容也随之发生滚动,从而出现了滚动穿透。

图像

# 官方解决方案

image-20210501184818764

弊端:

如果在van-popup 层 使用 catch:touchStart ="stopSlide" 事件,则pop里面的内容都不可以响应bind:tap 事件,即不可以实现pop页面的自定义的键盘; 参考文档(van-popup)https://vant-contrib.gitee.io/vant-weapp/#/popup

# 个人解决方案

catch:touchmove = 'stop_scroll_chaining' 不要禁止 touchstart,禁止touchmove即可,保证浮窗内的元素可以被点击,同时保证不会滑动穿透;