vant3 List 组件的一些坑

最新推荐文章于 2025-09-18 09:52:43 发布

原创最新推荐文章于 2025-09-18 09:52:43 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了在使用vant3 List组件时遇到的重复请求问题，包括接口错误导致的无限循环和loading状态控制的误区。通过设置finished属性及正确处理请求状态，避免了不必要的请求并发。

使用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，导致发不起请求。