微信小程序填坑之路(九):setData数据量过大的解决与分页加载的实现

我们经常使用setData方法来修改数据,从而达到更新页面的目的。但是当我们通过setData方法设置的数据过大时就会报如下错误。

vdSyncBatch 数据传输长度为 2260792 已经超过最大长度 1048576

这是因为setData设置的数据量是有限制的,单次设置的数据大小不得超过1024kb,否则就会出现如上错误。

而我们在一些列表页面中,每次上拉加载更多后,会习惯性的把之前存在的数据和新加载的数据合并后,一起通过setData提交来重新渲染页面。这样会留下隐患,当用户浏览的数据量达到一定程度时,就会出现如上错误。

推荐

解决方法

  • 常规做法:分页加载后,每次都将全部的数据通过setData提交
data:{
  // 数据源
  list:[]
},

getListData:function(){
  // 本次加载的数据
  let _list = [];
  ...
  setData({
       // 将之前的数据与本次加载的数据合并后,一起提交
       list: this.data.list.concat(_list)
  });
}
  • 改进后的做法:分页加载后,通过设置 list 指定位置的元素值,实现只提交新加载的数据,
data:{
  // 当前页数
  pageNo:0,
  // 数据源
  list:[]
},

getListData:function(){
  // 本次加载的数据
  let _list = [];
  ...
  setData({
       ['list[' + pageNo + ']']: _list,
  });
}

注意:改进后方案中的 list 与常规方案中的 list 已经不是同种数组。

常规方案中的 list,是一维数组,直接存放 item,结构为:[{...},{...},{...},...]

而改进方案中的 list 是二维数组,每个子元素为一页 item 数据的集合,而子元素数组中的每个元素才是 item 数据,结构为:[[{..},{...},{...}],[{..},{...},{...}],[{..},{...},{...}],...]所以需要注意对wxml中的列表结构进行修改

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

Code满满

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值