小程式處理大量資料列表的方法

寒江水發表於2019-01-22

前言

寫部落格主要是用來總結、鞏固知識點，加深自己對這個知識點的理解。同時希望能幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。

小程式處理列表的簡單方法

在專案中遇到資料量比較大的時候都會採用分頁來進行資料展示。在小程式中也不列外。我們可以可以通過 onReachBottom（頁面上拉觸底事件）這個方法來實現分頁請求。直接看程式碼：

請求列表資料的方法

  loadList() {
    let _that = this;
    App.Hq.promiseRequest({
        url: url,
        data: {
          "Page": {
            "PageSize": 20,
            "PageIndex": _that.data.PageIndex
          }
        },
        method: 'POST',
      }).then((res) => {
        if (res.Success) {
         if(_that.data.PageIndex===1){
            _that.setData({
                list:res.List
            })
         }
         //把其他也的資料通過concat方法拼接到_that.data.list中
         else if(_that.data.PageIndex>1){
            _that.setData({
                list:_that.data.list.concat(res.List)
            })
         }
        }
        else if (res.Code === -2000) {
          App.getToken(_that.loadNews);
          return false;
        } else {
          App.Hq.tipMask('請求失敗', '/static/image/tip.png');
          App.getLog(16, `${res.Message}`, '使用者端/evaluate頁面/方法/loadNews');
        }
      })
複製程式碼

頁面上拉後觸底載入更多頁資料

// 上滑載入更多    
 onReachBottom: function() {
    let _that = this;
    //上滑一次當前頁+1
    let currentPage = ++_that.data.PageIndex; 
    //把新的當前頁賦值給data物件裡的PageIndex
    _that.setData({  
      PageIndex: currentPage
    })
    //把當前頁根據伺服器端返回的總頁數進行比較，如果小於或者恆等於總頁數則進行資料請求否則進行提示
    if (currentPage < _that.data.totalPage || currentPage === _that.data.totalPage) {
      _that.loadNews();
    } else {
      App.Hq.afterSend();
      _that.setData({
        showTips: false,
      })
    }
 }
複製程式碼

當然上面這種方法也是可以的，並沒有錯。在資料量比較少的時候這種方法還是ok的，但一旦資料量大的時候，該方法就不行了，甚至會導致程式閃退。這是什麼原因呢？

這裡我們能把list裡的資料能在介面中顯示出來，主要就是靠setData這個方法把資料從邏輯層傳送到介面：關於具體的詳情請看官網說明

關於setData有幾點要注意：

1、直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。

2、僅支援設定可 JSON 化的資料。

3、單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。

4、請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。

這裡第三點提示我們通過setData設定的資料不能超過1024kb。如果按照上面的方法資料量大的時候單詞給setData設定的資料超過1024kb的時候不知道會出現什麼問題。有可能導致程式閃退。

在官方文件的優化建議裡有這麼段話：

小程式處理大量資料列表的方法

更好的處理資料列表的方法

由此看來。上面那種方法並不是很可取：那還有其他方法嗎？當然是有的了：

相對於上面的方法，我們只需要在資料儲存上做一些小的改變，就能實現載入更多的資料而且不影響效能。這個方法就是再增加一個陣列，用來存放資料。上一個方法中是把所有的資料都存放到一個資料中，這樣資料量很容易就會變大。這個方法，將每一頁請求過來的資料的引用放到一個新的陣列dataArray內。dataArray[0]存放第一頁資料，dataArray[1]儲存第二頁資料。請求新一頁，都只需要更新一組資料，這樣每次顯示的資料就不會很大。

  loadList() {
    let _that = this;
    App.Hq.promiseRequest({
        url: url,
        data: {
          "Page": {
            "PageSize": 20,
            "PageIndex": _that.data.PageIndex
          }
        },
        method: 'POST',
      }).then((res) => {
          if (res.TotalPage === 1) {
            _that.setData({
              showTips: false
            })
          }
          let currentPage = _that.data.PageIndex - 1; //獲取陣列下標
          res.List.forEach(item => {
            let theDate = new Date((item.CreateTime).replace(/-/g, '/')).getTime();
            item.CreateTime = App.Hq.getDateDiff(theDate, item.CreateTime);
          })
          _that.setData({
            ['list[' + currentPage + ']']: res.List,
            totalPage: res.TotalPage
          })
        }
        else if (res.Code === -2000) {
          App.getToken(_that.loadNews);
          return false;
        } else {
          App.Hq.tipMask('請求失敗', '/static/image/tip.png');
          App.getLog(16, `${res.Message}`, '使用者端/evaluate頁面/方法/loadNews');
        }
      })
複製程式碼

總結

可能大家在專案中遇到的資料不會特別大。用第一種方法也沒有發現不當的地方。（比如我一開始就使用的第一種方法）但總得來說在小程式中要儘量精簡傳輸的資料欄位。然後使用第二種資料處理的方法。可能會解決大部分問題。

參考資料： www.imooc.com/article/436…

相關文章