UNI-APP上拉分段加载数据

背景：

  测试APP时，发现列表数据上拉加载有毛病，要么显示不了所有数据，要么显示的数据有重复。经查看，是获取数据的API有分页参数（page和size），但是只是分页，而不是分段。换句话说，查询第二页的数据会连同第一页的数据一起返回，为了锻炼自己，决定从有瑕疵的前端解决这个问题。

思路：

1、获取数据的分段处理

  (1)无数据

• 不显示加载状态栏
• 显示无数据信息提示

  (2)有数据

• 动态设置API参数取值

  加载数据时动态改变API参数值，这里设置time来控制，追加数据时time++，确保查询的追加数据条数比上次获取的数据多十条。

• 分段截取数据

  以index为索引连续抽取十条数据放进定义的数组listArr（相当于中转器）中，根据reload值判断数据是第一次加载还是再次加载（这里统一说成追加数据）

• 组合分段数据显示

  将截取的追加数据和第一次加载的数据连接起来赋给最终list，通过template中的v-for循环显示在客户端

2、加载状态切换处理

  (1)渲染初加载完页面设置为‘上拉加载更多’

  (2)上拉到底设置为‘加载中’，这里通过判断是否为追加数据进行设置

  (3)数据加载完毕设置为‘没有更多’

    根据传递的条数值size和实际得到数据长度之差来判断数据是否加载完毕，如果不为0则表示加载完毕，此时设置loadingFlag控制上拉到底时不再触发数据加载

代码：

总结：

大神都推荐输出学习法，如今一试发现自己更菜了：在实现这一功能的过程中，脑子里想了很多东西，感觉很复杂，实现后成就感满满，现在将思路重新捋了捋，折成文字也就几百个字，真是汗颜。不过把思路整理出来也蛮有满足感的，继续坚持哈。