原标题:小程序暗黑技巧|彻底解决长列表页setData超过1M时报错和严重卡顿的问题
当我们开发列表页分页功能的时候,需要在page中setData去更新列表页,如果我们按照通常的方式去追加数据到列表数据,然后一次性setData到列表数据时,性能肯定会出现问题,表现是页面卡顿,总是处于加载画面,严重的话甚至报错,报错为“数据传输长度为 1486717 已经超过最大长度 1048576”,这里的1048576刚好等于1M。所以下面的方式是不可取的:
Page({
data:{
productList:[]
},
: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监测更新。
PHP技术大全
简介:用代码echo奇迹返回搜狐,查看更多
责任编辑: