vant弹出层滚动问题

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>
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值