vant3 list 的坑

关注

原创最新推荐文章于 2026-10-27 20:26:34 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）【代码】vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置，踩坑日记（一天半的踩坑经历）阅读详情

使用vant的时候，在移动端使用最多，就是list组件，几乎内容相关页面都需要一个list，触底加载，下拉刷新。虽然看到过一些文章，有点预防了，但是只有真正在项目中的时候才知道，为什么会犯错

最近在使用的时候碰到了一些坑：

1、List 组件一直调用接口

在一进入页面的时候，vant ui的List组件的onload触发机制是当内容触发到页面底部位置时，触发加载调用接口，直到finished.

解决方案：

1.设置immediate-check="false"，不要加载组件的时候就开始加载数据；

immediate-check 是否在初始化时立即执行滚动位置检查 boolean true

2.第一次稍微多请求一点数据，可以填满屏幕即可：比如设置 pageSize：15，让第一次进入页面不需要触发触底加载

3.将List数据分成初始化数据和附加数据两部分，第一部分直接初始化，这时的分页可以根据页面高度算出pageSize；

2、List组件的finished处理问题

原来的逻辑：当数据长度大于或者等于后台返回总长度时设置finished=true,但是如果后端报错了或者是空数据的时候不设置finished=true,会导致一直向后端发送请求。

优化后：添加上报错或者空数据的情况，给上 finished=true 设置

3. List组件加载动画错误

（1）onload在加载时只触发一次，页面向下滚动时，onload并不加载，你可以在获取数据的时候手动在前面给组件设置上 loading

（2）一直显示加载中，无法关闭，这时你要在获取数据里面做一个判断，判断数据是否已经全部获取，获取了就给 finished = true,即关闭加载。

4. 连续请求2，3次

（1）offset过于高,默认的高度是300,有一次获取数据一次只获取5条,虽然覆盖了页面高度,但稍作触碰就会二次发送.

（2）请求的数据过少,请求的数据不足以覆盖页面就会二次加载,可以看文档list第一条示例便是.

5.定位问题

<van-list
    class="listBox"
	v-model="loading"
	:finished="finished"
	finished-text="没有更多了"
	@load="onLoad"
	offset="300"
	:error.sync="error" 
	error-text="请求失败，点击重新加载"
	>
   <div v-for='(item, index) in list' :key="index"> 
   		<div>{{item.tit}}<div>
   </div>
 </van-list>

比如这个list给了 listBox 的类名，最好不要使用定位，浮动之类的css，可能造成高度错误，list整个组件也就不能用了

官网list组件详解：List 列表 - Vant 3 (gitee.io)