微信小程序[第九篇] -- 下拉刷新和上拉加载

下拉刷新和上拉加载是两个独立又密切联系的功能，上拉加载须要服务器端有分页机制，而下拉刷新除了从新获取信息外还要对以前的状态和页码进行初始化。

一个一个来吧。

服务器端分页

其实yii2早就已经为咱们准备好了，当咱们访问了GET /xcx/albums的时候，返回的实际上是一个带有分页信息的json，若是你对yii2很熟悉，必定知道activeDataProvider自己就是带分页功能的，默认每页20条数据。

咱们再来回顾一下GET /xcx/albums的返回

没错，在响应的header里你必定发现了上面四条数据，就是它们，每次接口的返回其实yii2已经告诉了咱们当前的页码、一共多少页、每页的数据量以及一共多少条数据。

OMG，这不就是咱们想要的么？~~~~

好，那就简单了，咱们只须要在接口处增长page参数告诉咱们要请求那一页就能够了。

小程序端

如今知道后台已经能按照页码返回数据了，接下来就是小程序，对于移动应用通常不会是直接显示页码而后点击，更可能是随着咱们屏幕的下滑逐渐出现新的内容，就是所谓的上拉加载。固然还有个下拉刷新，这个本章最后一部分进行讲解。

关于上拉加载

上拉加载主要利用了js的onReachBottom函数，它表示“页面上拉触底事件的处理函数”，咱们就在这一刻从后台获取新的数据而且添加到现有页面下方。

首先我须要在小程序页面定义一个变量（page）表明即将要获取第几页，而后再定义一个获取后台数据的函数就能够了，记住这个获取是要带页面参数的。

为此我独立出一个函数专门作信息获取这件事情，以下图

不知道你是否看明白，在onReady函数内咱们完成了数据的第一次加载。固然也许你更关心的是N+1次加载的事情，接下来咱们就来实现它，启动onReachBottom函数。

试想一下当咱们获取了第一页之后，页面下来到底部咱们须要获取第二页，此刻page参数应该2，为此咱们须要对loadList作一次小手术，此次手术完成了两件事情。

• 对page的赋值
• 对现有数据和新数据的合并

看看下图的改造

当从后台获取数据后进行循环，而后添加现有的数据数组中，就像上图的绿色框框内的代码同样。合并数据后执行page++供下一次使用。

而每次页面到底部的时候都进行一个onReachBottom函数，它执行了loadList。

就这样每次到底部都向后台要数据

疑问来了？？？？？是的，第一个问题就是page到何时是个头，按照上面的逻辑会一直递增，而后获取数据，这显然是逻辑错误的，咱们应该告诉小程序一共有多少页，当页面达到数量后就不在获取数据了。

为此咱们来增长一个新变量 hadLastPage = false，默认表明尚未到达最后一页，而后继续改造loadList，在这里用到了yii2给咱们响应header中的那些数据，看下图

逻辑不复杂，红色框内的意思是判断yii2的数据返回，若是当前页数已经等于总页数说明最后一页了，则设置hadLastPage=当前页数，不然page++

另外在函数最前端进行了一次判断，调用此函数时候，若是发现hadLastPage不是false，则直接提示到底了，再也不去后台获取数据。

关于下拉刷新

小程序对下拉刷新是有必定支持的，那就是json文件里的enablePullDownRefresh参数，当你以下设置enablePullDownRefresh时候

另外当咱们设置了enablePullDownRefresh=true后会触发js文件中的onPullDownRefresh函数，你能够在里面作要作的事情，好比对页面的初始化，对数据列表的清空等等。

在上文咱们已经完成了数据的上拉加载，接下来开始具体编写onPullDownRefresh函数。

一系列的初始化，记得最后执行一次wx.stopPullDownRefresh();将下拉关闭，不然那些小点点是不会消失的。

小提示：下拉刷新的样式在必定程度上也能够经过backgroundColor和backgroundTextStyle改变，好比你能够作一个下拉后背景是褐色，小点点是亮色的感受。

总结

以上就是下拉刷新和上拉加载，这只是其中一种思路，聪明的你必定会有更有趣的实现，能够留言此贴让我看到。

如今实现了相册的加载，可是这些数据都是假的，下一篇咱们是实现新建和编辑相册，你也将学习到如何使用小程序的表单功能。

另外代码已经同步到了github上，欢迎下载同步学习 https://github.com/abei2017/xgh