我要评论使用vant3 list 组件过程中遇到的一些坑
1、接口错误的时候，大量重复请求。
可能接口错误时vant3内部某些变量没重置，导致一直重复请求，解决方法是接口返回不成功finished设置成true
2、没有发起请求
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="getdata"
offset="50"
v-if="!list || (list && list.length)"
>
<item v-for="info in list" :key="info.id" :info="info" />
</van-list>
<script setup>
function getdata(){
if(loading.value || finished.value){
return
}
// 接口请求....
}
</script>有人可能跟我一样，习惯在数据请求方法中判断loading, vant 内部会对loading进行赋值，导致在调用方法前，loading为true，导致发不起请求。
处理vant list使用报错的点
1、使用vant-list在滚动条触底的时候，没有触发onload事件
- 可能是因为在van-list父元素的地方设置了父元素高度为100%，这里不能这样设置，
- 还有就是可能对需要遍历的数据，在每一次触底时，都进行了初始化
2、有时候在tab标签切换后，滚动条不再触发onload事件
解决方法是，在切换标签函数后，加上
this.loading=true this.finished =false
3、下拉刷新时，数据一直在加载中，
这是因为少写了，this.refreshing = false;
vant组件中，把这条语句写在onload（）函数中，通过onrefresh()函数调用onload（）时完成语句的实现，
但是有时候没有写在onload（）函数中，是需要我们自己添加在onrefresh（）函数里。
4、还有就是在我们刚进入页面时，就触发了一次onload事件，第二页的数据也显示出来了，
我的原因是，在进入页面时，我在created中也调用了一次求遍历数据的值，所以我进入时，相当于created调用了一次，在onload中又调用了一次。数据就加载显现到了第二页。
对于其各个api的理解
<van-pull-refresh v-model=“refreshing” @refresh=“onrefresh”> <van-list v-model=“loading” :finished=“finished” finished-text=“没有更多了” @load=“onload” :offset=“10” :error.sync=“error” error-text=“请求失败请重新加载” >
@refresh = “onrefresh”定义的是当列表下拉时，（其实可以理解为鼠标点击并下拉，然后松开的的事件），这个就是对数据进行刷新，回到没有触发onload（）函数之前@load=“onload”定义的是当滚动条滚动到底部时，触发onload事件loading，finished，error，他们都是布尔值loading是用来表示加载状态的finished表示数据加载完，显示finished-text文字error表示当数据加载失败时，显示error-text文字offset代表当滚动条距离底部小于该数值时，触发onload事件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论