mpvue实现小程序上拉刷新下拉加载

个人看了好多资料，发现写的并不是很全，走了很多弯路，故记下来自己下此做的时候少走弯路，也给看到的你们提供一些思路，话不多说。

配置

下拉刷新配置

根据项目需求选择是进行全局配置还是单页面配置。

1. 全局配置在app.json的window中

2. 页面配置在对应main.json中

"enablePullDownRefresh": true,

3. 上拉刷新和下拉加载的事件和data ,  methods 是同级的

下拉刷新事件

onPullDownRefresh () {

  console.log('下拉刷新')

}

上拉加载事件

onReachBottom () {

console.log('上拉加载')

}

关闭下拉刷新的动画

wx.stopPullDownRefresh( )

个人认为不需要使用这个关闭下拉刷新动画，因为更新数据操作不需要禁止

 

个人写订单的一些心得：

很重要的一点：网路数据请求要考虑请求失败情况

1. 上拉一直拉index= 1 的数据，不需要禁止

2.上拉细节完善：

1>下拉更新数据 < 每次要拉取数据的数量 ，提示不需要上拉加载

2>上拉加载的数据 == 0 不需要拉取

3.请求成功之后再改变index的值，否则请求失败之后，这个index值已经更改回缺少数据

4.拉取数据不可以不改变index的值，却只改变context的值，这样会重复拉取已经拉取过的数据，进行不必要操作

5.当保证请求回来的数据不为空的时候（也许因网络问题），在改变index，保证不会缺少数据

6.考虑返回的数据为空数组或空对象，做好判断

 

好多情况都是我程老师考虑到的，在此特别感谢程老师，谢谢您！