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事件
  • loadingfinishederror,他们都是布尔值
  • loading是用来表示加载状态的
  • finished表示数据加载完,显示finished-text文字
  • error表示当数据加载失败时,显示error-text文字
  • offset代表当滚动条距离底部小于该数值时,触发onLoad事件

总结

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

相关文章

  • Vue实现进度条变化效果

    Vue实现进度条变化效果

    这篇文章主要为大家详细介绍了Vue实现进度条变化效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 玩转vue的slot内容分发

    玩转vue的slot内容分发

    这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程

    Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程

    众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 示例vue 的keep-alive缓存功能的实现

    示例vue 的keep-alive缓存功能的实现

    这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue+element ui实现锚点定位

    vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 详解Vue结合后台的列表增删改案例

    详解Vue结合后台的列表增删改案例

    这篇文章主要介绍了详解Vue结合后台的增删改案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并页面显示(图片可删除)

    这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示,图片可以删除的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue.js实现大转盘抽奖总结及实现思路

    Vue.js实现大转盘抽奖总结及实现思路

    这篇文章主要介绍了 Vue.js实现大转盘抽奖总结及实现思路,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 如何在 Vue.js 中使用第三方js库

    如何在 Vue.js 中使用第三方js库

    本篇文章主要介绍了如何在 Vue.js 中使用第三方js库,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue 监听屏幕高度的实例

    vue 监听屏幕高度的实例

    今天小编就为大家分享一篇vue 监听屏幕高度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论