vant3中使用List组件的一些坑

目录 使用vant3 List 组件过程中遇到的一些坑 处理vant list使用报错的点 总结

使用vant3 List 组件 过程中 遇到的一些坑

1、接口错误的时候，大量重复请求。

可能接口错误时vant3内部某些变量没重置，导致一直重复请求，解决方法是接口返回不成功finished设置成true

2、没有发起请求

<van-list
    v-model:loading="loading"
    :finished="finished"
    finished -t ext="没有更多了"
    @load="getData"
    offset="50"
     v-if ="!list || (list  &&  list.length)"
 >
     < IT em 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事件

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的 文章 : vant之van-list的使用及踩坑记录 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码) Vue3中使用vant的踩坑实战日记

总结

以上是 为你收集整理的 vant3中使用List组件的一些坑 全部内容，希望文章能够帮你解决 vant3中使用List组件的一些坑 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vant3中使用List组件的一些坑的详细内容...