微信小程序填坑之路（九）：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中的列表结构进行修改。