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+ElementUI实现动态更换任意主题色(动态换肤)的全过程
众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论