uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录

发布时间:2020-11-26 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在使用uni.request获取后台数据时,我们往往碰到一个问题,列表的懒加载及数据实时更新,这里记录下我制作这类功能的方法。

问题描述:后台返回数据,前端需要进行10个为一组来分页,先显示前10个,下拉时再显示10个,当到底时,第一次到底显示下无数据的提示。

解决办法:前端制作分页,下拉方法。

分页方法思路:

这个方法的作用是把一维数组分成10个一组的二维数组,方法如下:

PaginationFun(arr){
  let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
  for (let i = 0; i < arr.length;) { //注意:这里与for循环不太一样的是,没有i++
    newArr.push(arr.slice(i,i += 10));
  }
  return newArr;
}

下拉方法思路:

下拉的作用是需要把分页处理好的数据进行分段加载,还要有下面三种功能:

1,页面跳转回来后需要重新加载数据。

2,页面下拉时需要进行数据拼接。

3,页面加载第一次数据前,需要初始化下拉数据。

要实现这个功能,是需要三个全局变量,分别为接下来的页数,是否可以下拉,拼接后用来显示的数据列表。

我这里设计了一个思路图如下:

uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录

 

 

uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录

 

 

根据这个思路,就可以写出方法了。

 

总结


以上是前端之家为你收集整理的uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录全部内容,希望文章能够帮你解决uni-app开发经验分享七: 有关列表数据下拉加载方法的解析及记录所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。