徹底解決長列表頁setData超過1M時報錯和嚴重卡頓的問題

當我們開發列表頁分頁功能的時候，需要在page中setData去更新列表頁，如果我們按照通常的方式去追加數據到列表數據，然後一次性setData到列表數據時，性能肯定會出現問題，表現是頁面卡頓，總是處於載入畫面，嚴重的話甚至報錯，報錯為「數據傳輸長度為 1486717 已經超過最大長度 1048576」，這裡的1048576剛好等於1M。所以下面的方式是不可取的:

Page({

data:{

productList:[]

},

onLoad:function(options){

let that = this;

//初始化 productList

},

onReachBottom:function(){

let that = this;

//獲取下一頁的productList，假設叫newProductList

// let newProductList = ...;

//並把數據追加到原來的productList數組中，這樣隨著用戶

//不停地觸及頁面底部載入新數據，最終會導致productList體積過大

//一次性setData

that.setData({

productList:productList

});

}

});

那麼如何解決呢？其實很簡單，微信小程序文檔中已經給出了答案。

文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

代碼如下：

changeItemInArray: function() {

// you can use this way to modify a danamic data path

this.setData({

"array[0].text":"changed data" //關鍵行1

})

},

changeItemInObject: function(){

this.setData({

"object.text": "changed data"

});

},

addNewField: function() {

this.setData({

"newField.text": "new data" //關鍵行

})

}

其實，我們只要把新加入的productList一項一項設置setData進去就行了。

正確示範：

onReachBottom:function(){

let that = this;

//獲取下一頁的productList，假設叫newProductList

// let newProductList = ...;

//下面的代碼中的setDataKey是關鍵

for(let idx in newProductList){

let setDataKey = "productList["+(primaryProductListLength+idx)+"]";

that.setData({

setDataKey :productList[idx]

});

}

}

所以通過這種方式對列表數據進行部分更新，實在是很方便。

但是，聰明的你不知有沒有發現什麼問題？

列表項沒有排重，後台數據變動可能會導致重複數據出現；

一個一個加入數據setData，並渲染數據會導致輕微卡頓；

3. 後台數據已經更新了但是列表頁的數據屬性沒有更新。

這幾個問題就留給讀者朋友自己解答了，猿哥就不再展開討論了，不過關於列表頁實時更新的問題，猿哥提供一種實現思路：websocket推送更新+hash監測更新。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！