【移动端vant 地址选择滑动不了】

本文分析了H5页面在小程序中滑动失效的问题,源于内嵌时禁用滚动的弹窗组件。解决方案是调整弹窗组件的lock-scroll属性为false,如van-overlay和van-dialog。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分析:

H5页面直接在浏览器打开是没有任何问题的,但是内嵌到小程序中就会出现,目前已出现在抖音,快手,小程序中,其他的没有试
大致看了一下,滑动不了的原因,可能是页面禁止滑动或滚动

原因:

这个bug出现得同时具备几大要素:1.内嵌H5,2,地址选择之前有使用过弹窗,
因为vant中的弹窗组件都会有个默认参数,打开弹窗时禁止页面滚动,这个可以解决滚动穿透的问题,但是像我们这种弹窗中有地址选择的就会出现地址无法选择的bug

解决:

使用的弹窗
1.Overlay 遮罩层
在这里插入图片描述
设置lock-scroll为false

<van-overlay :lock-scroll="false" />

2.Dialog 弹出框
在这里插入图片描述
设置lockScroll为false

<van-dialog v-model:show="show" title="标题"  :lockScroll="false">
  xxx
</van-dialog>

问题记录

vant是一个基于Vue.js的移动端组件库,提供了丰富的组件和功能,方便开发者快速构建移动端页面。其中,vant提供了一个名为vantlist的组件,用于展示列表数据。 通常情况下,当列表数据过多时,用户需要滑动页面才能浏览所有的列表项。而vantlist组件在实现滑动到底部不触发的功能时,可能存在以下几种情况导致该问题出现: 1. 数据不足:如果vantlist组件绑定的列表数据较少,不足以填充整个列表区域,那么即使滑动到底部也不会触发事件。 2. 事件绑定问题:可能是由于事件绑定不正确导致的。在使用vantlist组件时,通常需要监听滚动事件,并在滚动到底部时触发相关操作。如果事件绑定不正确,就无法正确触发相应的事件。 3. 滚动条显示问题:如果vantlist组件的滚动条没有正确显示,那么即使触发了滚动到底部的事件,也无法正确判断是否已经到达底部。 针对以上的问题,可以尝试以下解决方法: 1. 确认列表数据是否足够填充整个列表区域,如果数据不足,可以尝试增加数据量。 2. 检查事件绑定是否正确,确保绑定的事件名称和触发的事件是一致的。 3. 确认滚动条的显示是否正常,可以通过查看相关的CSS样式或者使用浏览器开发者工具进行调试。 总之,滑动到底部不触发的问题可能是由于数据量不足、事件绑定问题或者滚动条显示问题所致,需要仔细检查和排查相关原因,以确保vantlist组件能够正确触发滚动到底部的事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值