未使用优化方案前的代码:
let ret = 发送请求拿到的数据;
console.time(‘setData’)
this.setData(
{
goods: […this.data.goods, …ret.goods],
},
() => {
console.timeEnd(‘setData’)
}
)
以上为正常的下拉刷新设置,每次刷新过后,将已经获取到的数据和新请求来的数据进行合并;以达到正常呈现,但在数据较多,下拉次数较多的情况下,数据的加载时间会随着数据增加而增加,超过300ms,影响用户体验
下面给大家推荐一种解决方案:
let ret = 发送请求拿到的数据;
const data = {
goods: []
}
// 每次获取到的数据为20条
// 如果是第一次获取数据 data.goods为从0-19
// 后续更新第二页数据 data.goods 为20-39
for (let i = 0; i < ret.goods.length; i++) {
data['goods[' + (this.data.goods.length + i) + ']'] = ret.goods[i]
}
this.setData(data)
这种方案不会再对已有的数据进行操作,只会对新获取到的数据进行循环添加;这样每次的数据获取时间都很稳定,不会出现上面那种数据增多,时间增多的情况!