vant3中使用List组件的一些坑

更新时间：2023年01月18日 10:22:38 作者：supming1

这篇文章主要介绍了vant3中使用List组件的一些坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用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事件

总结

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

您可能感兴趣的文章:

Vue自定义指令详细
这篇文章主要介绍了Vue自定义指令，文章从背景开始详细介绍Vue自定义指令的详细内容，随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
2021-11-11
一文快速详解前端框架 Vue 最强大的功能
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下
2019-05-05
Vue项目中引入ESLint校验代码避免代码错误
这篇文章主要为大家介绍了Vue项目中引入ESLint插件校验代码避免代码错误的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
基于vue通用表单解决方案的思考与分析
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
详解vue中v-for的key唯一性
在for循环中生成的元素要加key属性不仅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其实都不是必须的，因为在 Vue和React中不加key是不会报错的，只是会有警告。但是我们在深入了解加key的原因后会明白，若想确保没有隐患的话，元素还是必须要加key属性。
2021-05-05
vue百度地图 + 定位的详解
这篇文章主要介绍了vue百度地图 + 定位的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue mixins混入使用解析
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
2023-02-02
iView-admin 动态路由问题的解决方法
这篇文章主要介绍了iView-admin 动态路由问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-10-10
vue中echarts视图不更新问题及解决
这篇文章主要介绍了vue中echarts视图不更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
带你一步步从零搭建一个Vue项目
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05