下拉重新整理和上拉載入是兩個獨立又密切聯絡的功能，上拉載入需要伺服器端有分頁機制，而下拉重新整理除了重新獲取資訊外還要對之前的狀態和頁碼進行初始化。

一個一個來吧。

伺服器端分頁

其實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上，歡迎下載同步學習 github.com/abei2017/xg…