小程序模擬ajax實現分頁功能

一、需求

1. 初次加載顯示 loadding
2. 下拉時下一頁
3. 上拉時上一頁
4. 最後一頁底部顯示“沒有更多”
5. 非最後一頁底部顯示“下拉加載更多”

二、7個請求參數

1. 頁面兩個下拉框數據 + 兩個input數據，四個查詢參數
2. 當前頁面page參數
3. 頁面size參數
4. url參數

三、實現原理

參考 最佳方式實現小程序文章
目前有兩種實現原理，第一種是使用數組對象做數據源。在加載下一頁數據時，將下一頁的數據拼到當前數組後面。弊端是如果數組中的對象較大時，數組的大小可能超過微信限制。可能會出現 VM429:1 appDataChange 數據傳輸長度爲 1203320 已經超過最大長度 1048576 的異常。

第二種是按文章所說，在數據存儲上做一些小的改變，就能實現加載更多的數據。這個方法就是再增加一個數組，用來存放數據。上一個方法是一個數組中存放所有的數據，數據量很容易就會變大。這個方法，將每一頁請求過來的數據的引用放到一個新的數組dataArray內。dataArray[0]存放第一頁數據，dataArray[1]存儲第二頁數據。請求新一頁，都只需要更新一組數據，這樣set的數據就不會超過微信小程序允許的長度。

考慮到實際需求，應該不會有太多數據，故採用第一種方式，直接concat。

四、模擬ajax請求

approveList: function(data) {
    return new Promise(function (resolve, reject) {
      // 模擬ajax異步請求2秒後返回數據
      setTimeout(function() {
        resolve({
          total: 23,
          page: 1,
          size: 10,
          result: dummy.lstApprove
        })
      }, 2000)
    })
  }

五、page頁面調用request參數完成pageSize大小的查詢