下拉刷新、优化数据方案:增量更新

未使用优化方案前的代码:

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)

这种方案不会再对已有的数据进行操作,只会对新获取到的数据进行循环添加;这样每次的数据获取时间都很稳定,不会出现上面那种数据增多,时间增多的情况!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值