下拉刷新和上拉加載是兩個(gè)獨(dú)立又密切聯(lián)系的功能，上拉加載需要服務(wù)器端有分頁(yè)機(jī)制，而下拉刷新除了重新獲取信息外還要對(duì)之前的狀態(tài)和頁(yè)碼進(jìn)行初始化。

一個(gè)一個(gè)來(lái)吧。

服務(wù)器端分頁(yè)

其實(shí)yii2早就已經(jīng)為我們準(zhǔn)備好了，當(dāng)我們?cè)L問(wèn)了GET /xcx/albums的時(shí)候，返回的其實(shí)是一個(gè)帶有分頁(yè)信息的json，如果你對(duì)yii2很熟悉，一定知道activeDataProvider本身就是帶分頁(yè)功能的，默認(rèn)每頁(yè)20條數(shù)據(jù)。

我們?cè)賮?lái)回顧一下GET /xcx/albums的返回

沒(méi)錯(cuò)，在響應(yīng)的header里你一定發(fā)現(xiàn)了上面四條數(shù)據(jù)，就是它們，每次接口的返回其實(shí)yii2已經(jīng)告訴了我們當(dāng)前的頁(yè)碼、一共多少頁(yè)、每頁(yè)的數(shù)據(jù)量以及一共多少條數(shù)據(jù)。

OMG，這不就是我們想要的么？~~~~

好，那就簡(jiǎn)單了，我們只需要在接口處增加page參數(shù)告訴我們要請(qǐng)求那一頁(yè)就可以了。

小程序端

現(xiàn)在知道后臺(tái)已經(jīng)能按照頁(yè)碼返回?cái)?shù)據(jù)了，接下來(lái)就是小程序，對(duì)于移動(dòng)應(yīng)用一般不會(huì)是直接顯示頁(yè)碼然后點(diǎn)擊，更多是隨著我們屏幕的下滑逐漸出現(xiàn)新的內(nèi)容，就是所謂的上拉加載。當(dāng)然還有個(gè)下拉刷新，這個(gè)本章最后一部分進(jìn)行講解。

關(guān)于上拉加載

上拉加載主要利用了js的onReachBottom函數(shù)，它表示“頁(yè)面上拉觸底事件的處理函數(shù)”，我們就在這一刻從后臺(tái)獲取新的數(shù)據(jù)并且添加到現(xiàn)有頁(yè)面下方。

首先我需要在小程序頁(yè)面定義一個(gè)變量（page）代表即將要獲取第幾頁(yè)，然后再定義一個(gè)獲取后臺(tái)數(shù)據(jù)的函數(shù)就可以了，記住這個(gè)獲取是要帶頁(yè)面參數(shù)的。

為此我獨(dú)立出一個(gè)函數(shù)專門(mén)做信息獲取這件事情，如下圖

不知道你是否看明白，在onReady函數(shù)內(nèi)我們完成了數(shù)據(jù)的先進(jìn)次加載。當(dāng)然也許你更關(guān)心的是N+1次加載的事情，接下來(lái)我們就來(lái)實(shí)現(xiàn)它，啟動(dòng)onReachBottom函數(shù)。

試想一下當(dāng)我們獲取了先進(jìn)頁(yè)以后，頁(yè)面下來(lái)到底部我們需要獲取第二頁(yè)，此刻page參數(shù)應(yīng)該2，為此我們需要對(duì)loadList做一次小手術(shù)，這次手術(shù)完成了兩件事情。

  • 對(duì)page的賦值
  • 對(duì)現(xiàn)有數(shù)據(jù)和新數(shù)據(jù)的合并

看看下圖的改造

當(dāng)從后臺(tái)獲取數(shù)據(jù)后進(jìn)行循環(huán)，然后添加現(xiàn)有的數(shù)據(jù)數(shù)組中，就像上圖的綠色框框內(nèi)的代碼一樣。合并數(shù)據(jù)后執(zhí)行page++供下一次使用。

而每次頁(yè)面到底部的時(shí)候都進(jìn)行一個(gè)onReachBottom函數(shù)，它執(zhí)行了loadList。

就這樣每次到底部都向后臺(tái)要數(shù)據(jù)

疑問(wèn)來(lái)了？？？？？是的，先進(jìn)個(gè)問(wèn)題就是page到什么時(shí)候是個(gè)頭，按照上面的邏輯會(huì)一直遞增，然后獲取數(shù)據(jù)，這顯然是邏輯錯(cuò)誤的，我們應(yīng)該告訴小程序一共有多少頁(yè)，當(dāng)頁(yè)面達(dá)到數(shù)量后就不在獲取數(shù)據(jù)了。

為此我們來(lái)增加一個(gè)新變量 hadLastPage = false，默認(rèn)代表還沒(méi)有到達(dá)最后一頁(yè)，然后繼續(xù)改造loadList，在這里用到了yii2給我們響應(yīng)header中的那些數(shù)據(jù)，看下圖

邏輯不復(fù)雜，紅色框內(nèi)的意思是判斷yii2的數(shù)據(jù)返回，如果當(dāng)前頁(yè)數(shù)已經(jīng)等于總頁(yè)數(shù)說(shuō)明最后一頁(yè)了，則設(shè)置hadLastPage=當(dāng)前頁(yè)數(shù)，否則page++

另外在函數(shù)最前端進(jìn)行了一次判斷，調(diào)用此函數(shù)時(shí)候，如果發(fā)現(xiàn)hadLastPage不是false，則直接提示到底了，不再去后臺(tái)獲取數(shù)據(jù)。

關(guān)于下拉刷新

小程序?qū)ο吕⑿率怯幸欢ㄖС值?，那就是json文件里的enablePullDownRefresh參數(shù)，當(dāng)你如下設(shè)置enablePullDownRefresh時(shí)候

另外當(dāng)我們?cè)O(shè)置了enablePullDownRefresh=true后會(huì)觸發(fā)js文件中的onPullDownRefresh函數(shù)，你可以在里面做要做的事情，比如對(duì)頁(yè)面的初始化，對(duì)數(shù)據(jù)列表的清空等等。

在上文我們已經(jīng)完成了數(shù)據(jù)的上拉加載，接下來(lái)開(kāi)始具體編寫(xiě)onPullDownRefresh函數(shù)。

一系列的初始化，記得最后執(zhí)行一次wx.stopPullDownRefresh();將下拉關(guān)閉，否則那些小點(diǎn)點(diǎn)是不會(huì)消失的。

小提示：下拉刷新的樣式在一定程度上也可以通過(guò)backgroundColor和backgroundTextStyle改變，比如你可以做一個(gè)下拉后背景是褐色，小點(diǎn)點(diǎn)是亮色的感覺(jué)。

總結(jié)

以上就是下拉刷新和上拉加載，這只是其中一種思路，聰明的你一定會(huì)有更有趣的實(shí)現(xiàn)，可以留言此貼讓我看到。

現(xiàn)在實(shí)現(xiàn)了相冊(cè)的加載，但是這些數(shù)據(jù)都是假的，下一篇我們是實(shí)現(xiàn)新建和編輯相冊(cè)，你也將學(xué)習(xí)到如何使用小程序的表單功能。

另外代碼已經(jīng)同步到了github上，歡迎下載同步學(xué)習(xí) https://github.com/abei2017/xgh