小程序服务器卡顿的解决方法,小程序暗黑技巧|彻底解决长列表页setData超过1M时报错和严重卡顿的问题...

原标题：小程序暗黑技巧|彻底解决长列表页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奇迹返回搜狐，查看更多

责任编辑：