vant-list上拉加载onload事件触发多次问题及解决

 更新时间:2023年01月17日 16:10:46   作者:weixin_45121510  
这篇文章主要介绍了vant-list上拉加载onload事件触发多次问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant-list上拉加载onload事件触发多次

场景

3个tab页签切换时,调用不同接口,在某一个tab只要翻页到>=2的情况,当它再点击到另一个tab的时候,另外一个tab就会连续调用两次查询接口

(因为它不仅触发了created还触发了onload事件:且顺序为:进入created调用查询接口,在.then之前,异步查询还未返回的时候,又会去触发onload事件,在current+=1之后再次进行查询)

知识点运用:

一、基础用法

List 组件通过 loading 和 finished 两个变量控制加载状态,当组件滚动到底部时,会触发 load事件并将 loading 设置成 true。

此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可。

若数据已全部加载完毕,则直接将 finished 设置成 true 即可。

二、List 的运行机制是什么?

List 会监听浏览器的滚动事件并计算列表的位置,当列表底部与可视区域的距离小于offset时,List会触发一次 load 事件。

三、为什么 List 初始化后会立即触发 load 事件?

List 初始化后会触发一次 load事件,用于加载第一屏的数据,这个特性可以通过immediate-check属性关闭。

四、为什么会连续触发 load 事件?

如果一次请求加载的数据条数较少,导致列表内容无法铺满当前屏幕,List 会继续触发 load事件,直到内容铺满屏幕或数据全部加载完成。

因此你需要调整每次获取的数据条数,理想情况下每次请求获取的数据条数应能够填满一屏高度。

五、loading 和 finished 分别是什么含义?

List有以下三种状态,理解这些状态有助于你正确地使用List组件:

  • 非加载中,loading为false,此时会根据列表滚动位置判断是否触发load事件(列表内容不足一屏幕时,会直接触发)
  • 加载中,loading为true,表示正在发送异步请求,此时不会触发load事件
  • 加载完成,finished为true,此时不会触发load事件 在每次请求完毕后,需要手动将loading设置为false,表示加载结束

这次遇到的问题,可以利用第五点,解决方法:

在进入created的发送请求之前,将this.loading = true , ⇒⇒⇒ (利用:加载中,loading为true,表示正在发送异步请求,此时不会触发load事件),让系统知道此时正在异步请求数据,让它别触发onload事件

代码:

<van-list
  v-model="loading" class="van-list-style" :immediate-check="false"
  :finished="finished" :finished-text="finishedText"
  :error.sync="error" error-text="请求失败,点击重新加载"
  @load="onLoad">
  <div class="list" v-if="dataList.length > 0">
    <div class="list-box2" v-for="(item,index) in dataList" :key="index" @click="handleClick(item)">
      ………………………………………
    </div>
  </div>
  <div v-if="noData" style="margin-top:30%">
    <img src="@/common/imgs/no-data.png" alt="" style="width:100%">
  </div>
</van-list>

data() {
   return {
     dataList:[],
     current:1,
     size:10,
     loading: false, // 上拉加载 ?????? 
     finished: false, // 上拉加载完毕
     error: false, // 是否展示错误
     finishedText:"没有更多了",
     noData:false, // 是否展示没有数据的图片
     // offset: 100 // 滚动条与底部距离小于 offset 时触发load事件
   }
 },

 created() {
   // 调用列表查询接口
   this.init(this.tab)
 },

methods:{
 init(val) {
   if(val === '1') {
     this.createList(1,10)
   } 
 },
   
//查询接口
createList(current,size) {
  let param = { current:current, size:size }
  
  // 重点!!!!!!!!!在这里将loading置为true
  ***this.loading = true;***

  createList(param).then(res=>{
    let that = this
    if(res.status == true) {
   	 //赋值
      const dataList = res.body.records
      const pages = res.body.pages
      // 如果返回数据为空
      if(dataList == null || dataList.length === 0) {
        that.finished = true
        that.finishedText = "没发现任何东西,去其他地方逛逛吧~"
        that.noData = true
        return
      }
      // 加载状态结束  可以写在这里也可以写在finally里面
      that.loading = false;
      
      // 根据当前页进行数据处理
      if(that.current === 1) {
        that.dataList = dataList
      } else {
        that.dataList = that.dataList.concat(dataList)
      }

      // xxx!!!最后一页不足10条的情况 ,这样写实际有问题,因为如果是最后一页为10条的情况,就会第二次去调用接口
      //if(dataList.length < that.size) {
       // that.finished = true
       //that.finishedText = '没有更多了';
      //}

      // 使用这种!! 证明已经是最后一页了
      if(that.current = pages) {
        that.finished = true
        that.finishedText = '没有更多了';
      }
    }
  })
  .catch(err=>{this.error = true; })
  .finally(()=>{this.loading = false })
},

// 上拉刷新
 onLoad() {
   this.current+=1
   this.createList(this.current,this.size)
 },
}

总结

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

相关文章

  • 一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    这篇文章主要介绍了一文搞懂Vue3中的异步组件,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • Vue自定义指令的使用详细介绍

    Vue自定义指令的使用详细介绍

    我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令
    2022-09-09
  • vue实现点击展开点击收起效果

    vue实现点击展开点击收起效果

    这篇文章主要介绍了vue实现点击展开,点击收起效果,首先我们需要定义data里面的数据,使用computed对data进行处理,需要的朋友可以参考下
    2018-04-04
  • element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    element ui时间日期选择器el-date-picker报错Prop being mutated:"

    在日常开发中,我们会遇到一些情况,限制日期的范围的选择,下面这篇文章主要给大家介绍了关于element ui时间日期选择器el-date-picker报错Prop being mutated: "placement"的解决方式,需要的朋友可以参考下
    2022-08-08
  • 解决vue无法设置滚动位置的问题

    解决vue无法设置滚动位置的问题

    这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下
    2018-10-10
  • Vue3+Element+Ts实现表单的基础搜索重置等功能

    Vue3+Element+Ts实现表单的基础搜索重置等功能

    本文主要介绍了Vue3+Element+Ts实现表单的基础搜索重置等功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 简单了解前端渐进式框架VUE

    简单了解前端渐进式框架VUE

    这篇文章主要介绍了前端渐进式框架VUE的相关资料,文中讲解的非常细致,帮助大家开始学习VUE,感兴趣的朋友可以了解下
    2020-07-07
  • 详解vue大文件视频切片上传的处理方法

    详解vue大文件视频切片上传的处理方法

    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下
    2023-08-08
  • Vue公共loading升级版解决思路(处理并发异步差时响应)

    Vue公共loading升级版解决思路(处理并发异步差时响应)

    这篇文章主要介绍了Vue公共loading升级版(处理并发异步差时响应),解决思路是通过定义一个全局对象来存储每个接口的响应状态,直到每个请求接口都收到响应才变更状态,结束loading动画,需要的朋友可以参考下
    2023-11-11
  • 解决vue项目中出现Invalid Host header的问题

    解决vue项目中出现Invalid Host header的问题

    这篇文章主要介绍了解决vue项目中出现"Invalid Host header"的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论