Vue移动端下拉加载更多数据onload实现方法浅析

思想：van-list组件负责UI层监测触底, 执行onload函数, page++, 请求下页数据, 和现在数据合并显示更多, 设置loading为false, 确保下次触底还能执行onLoad

vant是一个可用于移动端的组件库，搭建页面框架，需要使用到vant组件，添加依赖yarn add [email protected]至vue2项目内，此处用到van-list组件。

vant中的组件van-list来动态渲染数据，下拉加载首先需要绑定变量loading(加载状态)、属性finished(是否全部加载完成)，finished-text全部加载完成显示的文字

 
       正常的遍历searchResult内数据 渲染至页面内容
       

数据：注意要有当前页页码page配合实现

data() {
    return {
      searchResult: [],  //搜索到的总的数据，用此数组内数据来遍历展示
      loading: false,  //加载中 (状态) - 只有为false, 才能触底后自动触发onload方法
      finished: false,   // 未加载全部 (如果设置为true, 底部就不会再次执行onload, 代表全部加载完成)
      page: 1,  // 当前搜索结果的页码
    };
  },  

以上为准备的数据，

onload 下拉刷新加载更多数据 （触底后加载下一页数据）

思想：

1、监测页面触底执行onload事件 （onload事件:页面内所有元素包括图片等都加载完成后执行）

2、配合后台接口，传递下一页的标识

3、拿到下一页数据后追加到当前数组末尾即可

第一次发送getSearchResult数据请求为加载第一页数据，限制获取数据数量limit为20条，第二次getSearchResult则是下拉到底，再去获取20条数据，再添加到第一次保存数据的数组里，这样就有40条数据同时渲染在了页面上，以后每下拉一次，就是此种操作，从请求里获取不到数据了，将finished赋值为true下拉加载事件就会停止

到此这篇关于Vue移动端下拉加载更多数据onload实现方法浅析的文章就介绍到这了,更多相关Vue下拉加载 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！