入門微信小程序(含實戰) [第九篇] -- 下拉刷新和上拉加載

下拉刷新和上拉加載是兩個獨立又密切聯繫的功能，上拉加載須要服務器端有分頁機制，而下拉刷新除了從新獲取信息外還要對以前的狀態和頁碼進行初始化。

一個一個來吧。

服務器端分頁

其實yii2早就已經爲咱們準備好了，當咱們訪問了GET /xcx/albums的時候，返回的實際上是一個帶有分頁信息的json，若是你對yii2很熟悉，必定知道activeDataProvider自己就是帶分頁功能的，默認每頁20條數據。

咱們再來回顧一下GET /xcx/albums的返回

header

沒錯，在響應的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，則直接提示到底了，再也不去後臺獲取數據。

alt

關於下拉刷新

小程序對下拉刷新是有必定支持的，那就是json文件裏的enablePullDownRefresh參數，當你以下設置enablePullDownRefresh時候

看到下拉了麼

另外當咱們設置了enablePullDownRefresh=true後會觸發js文件中的onPullDownRefresh函數，你能夠在裏面作要作的事情，好比對頁面的初始化，對數據列表的清空等等。

alt

在上文咱們已經完成了數據的上拉加載，接下來開始具體編寫onPullDownRefresh函數。

alt

一系列的初始化，記得最後執行一次wx.stopPullDownRefresh();將下拉關閉，不然那些小點點是不會消失的。

小提示：下拉刷新的樣式在必定程度上也能夠經過backgroundColor和backgroundTextStyle改變，好比你能夠作一個下拉後背景是褐色，小點點是亮色的感受。

總結

以上就是下拉刷新和上拉加載，這只是其中一種思路，聰明的你必定會有更有趣的實現，能夠留言此貼讓我看到。

如今實現了相冊的加載，可是這些數據都是假的，下一篇咱們是實現新建和編輯相冊，你也將學習到如何使用小程序的表單功能。

另外代碼已經同步到了github上，歡迎下載同步學習 github.com/abei2017/xg…