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

90 篇文章 1 订阅

背景:在使用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第一条示例便是.

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现滚动到底部加载下一页数据,可以使用 `van-list` 的 `@scroll.native` 事件来监听滚动事件,然后通过计算列表高度和滚动高度来判断是否滚动到了底部。 具体实现步骤如下: 1. 给 `van-list` 组件添加 `ref` 属性,用于获取组件实例。 ```html <van-list ref="list" :finished="isFinished" :loading="isLoading" @load="onLoad"> ... </van-list> ``` 2. 在 `mounted` 钩子函数,获取 `van-list` 组件实例,并给 `window` 对象添加 `scroll` 事件监听器。 ```typescript import { defineComponent, onMounted, ref } from 'vue'; import { List } from 'vant'; export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { // 滚动到底部,触发加载更多 } }); }); return { listRef, }; }, }); ``` 3. 在 `@load` 事件,将 `isFinished` 和 `isLoading` 属性设置为 `true` 和 `false`,表示数据已经加载完成或正在加载。 ```typescript export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); const isFinished = ref(false); const isLoading = ref(false); const onLoad = () => { if (!isFinished.value && !isLoading.value) { isLoading.value = true; // 发送网络请求,获取下一页数据 // 请求成功后,将 isLoading 设置为 false,表示加载完成 } }; onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { onLoad(); } }); }); return { listRef, isFinished, isLoading, onLoad, }; }, }); ``` 这样,当滚动到底部时,就会触发 `onLoad` 方法,从而加载下一页数据。需要注意的是,在数据全部加载完成后,需要将 `isFinished` 设置为 `true`,以防止重复加载数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值