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

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

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

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

然后在加载事件中，来控制，当数据返回成功之后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')
   });


};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;
});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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第一条示例便是.