vant弹出层滚动问题

vant 弹出层popup 数据量一多就无法滚动问题可以在弹出层popup写个滚动方法，然后使用lock-scroll=“flase”把默认弹出层组件的锁定背景滚动给打开，这样的话弹出层就能进行滚动。不过这会导致一个问题：弹出层会滚动，弹出层底下的背景也会跟着滚动，这完完全全是多做了事，所以可以考虑在van-popup外面加一层div标签，在div标签上加入@touchmove.prevent，

ling_hun_

6216人浏览 · 2022-04-12 10:04:40

ling_hun_ · 2022-04-12 10:04:40 发布

vant 弹出层popup 数据量一多就无法滚动问题

可以在弹出层popup写个滚动方法，然后使用lock-scroll=“flase”把默认弹出层组件的锁定背景滚动给打开，这样的话弹出层就能进行滚动。
不过这会导致一个问题：弹出层会滚动，弹出层底下的背景也会跟着滚动，这完完全全是多做了事，所以可以考虑在van-popup外面加一层div标签，在div标签上加入@touchmove.prevent，禁止底层滚动，这样弹出层能滚动，背景也不会跟着滚动。

<div @touchmove.prevent>
     <van-popup v-model="isProductDataShow" position="bottom" round :style="{ height: '80%', width: '100%' }" :lock-scroll="false">
        <product-detail @close="isProductDataShow = false"></product-detail>
     </van-popup>
 </div>