uniapp：物品列表的数据分页加载与下拉刷新

[221900228_叶小杰]

目录

• 一、技术概述
• 二、技术详述
• 1.全局文件的配置
• 2.外观界面
• （1）界面代码
• （2）引入的组件
• 3.逻辑函数
• （1）数据介绍
• （2）下拉刷新
• （3）上拉加载
• 三、问题与解决
• 1.删改数据返回物品列表后如何保证数据一致性？
• 四、总结
• 五、参考

一、技术概述

在如今的移动端软件中，一个可拖动页面是十分常见的，如何获取数据可以既考虑到数据的大小、又方便实现数据获取？
为了让用户可以刷新物品数据、为了防止数据一次性获取的时候数据过多导致的一系列问题，我们使用了下拉刷新和上拉加载技术，其中主要介绍的是上拉加载。

二、技术详述

1.全局文件的配置

• 在对应的页面配置文件pages.json中的style属性中添加enablePullDownRefresh和onReachBottomDistance属性
• enablePullDownRefresh：开启下拉刷新
• onReachBottomDistance：设置实现上拉加载功能设置的触底距离参数。（也就是上拉到距离底部多少距离的时候触发加载获取数据）
  

  

• 有关下拉刷新的其他配置可以参考uniapp官方文档中page的配置，部分参数如下

  

2.外观界面

（1）界面代码

（2）引入的组件

注：部分组件有修改内部代码

• 市场组件：
  搜索栏zy-search
  分类栏wuc-tab
• 官方组件：
  加载更多uni-load-more
  侧滑操作uni-swipe-action

3.逻辑函数

（1）数据介绍

• loadingStatus：传给uni-load-more组件的参数，用于控制加载组件图标展示
• condition：获取后端接口的部分参数条件
• nowPage：当前要获取的页数（第几页）
• goodList：物品对象列表

（2）下拉刷新

• 下拉出现图标的时候执行重置代码

• 其中先执行刷新数据代码，比如刷新参数：存储数据、接口参数；然后执行goodsListSort用于获取物品第一页数据、stopPullDownRefresh用于停止刷新图标
  

  

• 在该事件中，我们调用自定义方法goodsListSort获取物品第一页数据。

  

• 执行流程
  流程与下面的上拉加载类似，区别在于加载按钮的展示条件。

（3）上拉加载

• 当我们上拉到指定距离的时候会触发onReachBottom事件
  

  

• 在该事件中，我们调用自定义方法getMoreGoodList加载物品下一页数据。
  

  

• 执行流程
  

  

三、问题与解决

1.删改数据返回物品列表后如何保证数据一致性？

删除

起初：直接在发出post删除后端数据后再次刷新界面获取数据，但是在实践过后发现删除后端数据后再次刷新会导致页面重新回到顶部，这对用户是很不友好的，不利于多次删除临近又靠后的数据，影响用户体验。

后来：当删除物品的时候发出post请求，当请求收到211，也就是成功的返回码时，将本地对应物品的数据通过过滤器删除。

修改

起初：当用户对物品进行修改的时候不进行操作，用户想看修改后的列表数据需要手动下拉刷新物品重新刷新数据。

后来：添加了onShow生命周期函数，在用户每次打开界面的时候对界面重新获取数据。

四、总结

• 在不断的查找满意的组件过程中，对组件的运用更加熟练

• 比较大的感受就是：

• 1. 官方文档是学习的主要途径，百度搜出来的目前感觉有些有点不靠谱
• 2. 官方组件大部分很好用，市场组件有好有坏（试了好多个，看了好多内部代码勉强找到几个想要的T.T）
     

     

• 3. 写代码写完要记得测试下功能，不然经常会出现功能残缺或者不符合要求的情况，比如这个数据的删改。

五、参考

uniapp官方文档
Dcloud插件市场