小程序暗黑技巧|彻底解决长列表页setData超过1M时报错和严重卡顿的问题
小程序暗黑技巧|彻底解决长列表页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体积过大
let productList = that.data.productList.concat(newProductList);
//一次性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 = ...;
let primaryProductListLength = that.data.productList.length;
//下面的代码中的setDataKey是关键
for(let idx in newProductList){
let setDataKey = "productList["+(primaryProductListLength+idx)+"]";
that.setData({
setDataKey :productList[idx]
});
}
}
所以通过这种方式对列表数据进行部分更新，实在是很方便。
但是，聪明的你不知有没有发现什么问题？
- 列表项没有排重，后台数据变动可能会导致重复数据出现；
- 一个一个加入数据setData，并渲染数据会导致轻微卡顿；
3. 后台数据已经更新了但是列表页的数据属性没有更新。
这几个问题就留给读者朋友自己解答了，猿哥就不再展开讨论了，不过关于列表页实时更新的问题，猿哥提供一种实现思路：websocket推送更新+hash监测更新。