vant组件库中使用van-list组件中load加载事件触发多次的问题

最新推荐文章于 2025-05-07 18:17:20 发布

weixin_49203377

最新推荐文章于 2025-05-07 18:17:20 发布

阅读量7.8k

点赞数 2

分类专栏： vue遇到的问题文章标签： list 数据结构

本文链接：https://blog.youkuaiyun.com/weixin_49203377/article/details/121701011

版权

vue遇到的问题专栏收录该内容

18 篇文章

订阅专栏

本文主要介绍了在使用vantUI组件库时，如何解决列表加载到底部后切换Tab会重复触发加载事件的问题。作者通过设置初始加载状态、控制加载进度条、手动调整滚动位置以及调整offset值来避免不必要的加载。在切换Tab时清空数据并重置加载状态，确保每次切换都从第一页开始。同时，通过减小offset值防止未达到底部即触发加载事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在使用vant UI组件库的时候，当列表加载到底部的时候，可以结合load加载事件，继续获取下一页的数据
在这里插入图片描述

但是和tab切换结合的时候，就会出现问题了，比如第一个tab下面我进行了忘下滑动的滚动事件，然后我再切换到第二个tab下面，这时候，又会自动执行了一遍加载事件（感觉1.应该是刚开始没有数据，然后直接到底部了，所以唤起了load事件2.第一个列表由于往下滑动了，所以滚动条还在刚才滑动下去的位置，所以直接到底了又触发了load加载事件）
所以针对这两个问题做了以下处理
1.首先页面上 loading（控制加载进度条的）初始化为true

//下拉列表刷新
const isLoading = ref(true);//加载状态
const const finished = ref(false);//是否加载

然后在加载事件中，来控制，当数据返回成功之后isloading设置为false,
判断数据请求的页数，如果当前请求的页数大于数据总页数，就让finished=true,这时候就会停止加载了

const groupItem=reactive([])
const finished = ref(false);
//下拉列表刷新
const isLoading = ref(true);
//上拉加载更多
const onLoadAdd = () => {
  console.log('执行了下拉')
   isLoading.value = true;
   page.value = page.value + 1;
  // console.log(page.value);
   recommList(page.value, "10",pushItem.value).then((response) => {
     console.log(response)
    isLoading.value = false;
         
  // if( response.length==undefined || response.length==0 ){
    if(page.value>=response.totalPage){
       finished.value = true;
      //  console.log(isLoading,finished)
       return
    }else{
      groupItem.value = groupItem.value.concat(response.list);
    }
    // console.log(response, 'show this response')
   });


};

2.然后当切换tab的时候手动把scrolltop置顶

//切换下拉菜单
const dropChange = (value) => {
  document.documentElement.scrollTop=0
  window.pageYOffset=0
  document.body.scrollTop=0
  page.value=1
   isLoading.value = true
   finished.value=false
  pushItem.value=value
  recommList("1", "10", pushItem.value).then((response) => {
  console.log(response);
    
    setTimeout(()=>{
     isLoading.value = false
    },2000)
  groupItem.value = response.list;
});
};

3.van-list中有一个属性offset，用来设置滚动条与底部距离小于offset时触发load事件，所以把这个值设置的小一点，当滚动条没有在底部时不去触发load事件
在这里插入图片描述
总结：
vant中van-list使用的主要原理是当页面数据小于设置的offset设置的高度的时候，就会触发load,在load里面我们需要请求下一页的数据，这时候我们把page+1了，并且把获取到的数据又push到了需要渲染的列表数组里，成功返回数据之后将loading的样式关闭，并且判断当前的页数是不是大于等于数据库返回的总的页数，如果是就将finished设置为true,表示所有的数据加载完毕
所以我们进行的以下操作来解决遇到的问题：
方法1：在mounted或者create调用,原因是有可能在数据没回来的时候load就监测到数据低于高度,也发送了一次,等到数据回来时已经请求两次了.所以干脆不需要调用,交给load检测即可.
在切换的时候先把数据置为空数组
方法2：offset过于高,默认的高度是300,有一次获取数据一次只获取5条,虽然覆盖了页面高度,但稍作触碰就会二次发送.
3.请求的数据过少,请求的数据不足以覆盖页面就会二次加载,可以看文档list第一条示例便是.