微信小程序setData数据量过大问题的解决与分页刷新加载的实现

微信小程序官方文档对于setData的限制：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 问题：从绿色框中可以看出，显示setData每次数据的上限是1024k，当数据量多大时，如何通过setData 来实现目的呢？

• 解决：从红色框中可以看出，setData可以通过分批来对同一个data中的对象进行修改，而不是从新覆盖某个data中的对象。

常规方式：通过setData提交数据的做法：

• 一次性将所有的dataList数据全部通过setData提交：

./dataList.js
----------------------------------

Page({
  // 页面的初始数据
  data: {
  	dataList: [],
  },

  // 生命周期函数--监听页面加载
  onLoad: async function () {
	let dataList = [];
	dataList = this.getDataListMethod();
	this.setData({
	  dataList:dataList
	})
  },
  
  // 获取目标一维数组
  getDataListMethod(){
    let dataList = [];
    .... // 获取dataList具体操作
    console.log(dataList);
    // [{...},{...},...{...}]
    return dataList;
  };
})

分页渲染方式：通过setData提交数据的做法：

• 将dataList列表数据分组后存放在页面中，需要数据时，提交指定dataList中指定位置的数据，只需要加载本次需要的数据：

注意：改进后方案中的 dataList 与常规方案中的 dataList 已经不是同种数组，
该方法通过二维数组，将源数据进行分组，每次页面列表需要下拉加载数据时，通过调用loadingData()方法添加一组数据来对dataList进行更新数据渲染

./dataList.js
----------------------------------

let dataGroupList = [];

Page({
  // 页面的初始数据
  data: {
    pageNum: 0,
  	dataList: [],
  },

  // 生命周期函数--监听页面加载
  onLoad: function () {
	let dataList = [];
	dataList = this.getDataListMethod();
	// dataGroupList已经在页面首定义好了。
	dataGroupList = this.groupArray(dataList, 10);
	// 页面加载时加载的数据：
	this.setData({
	  ['dataList[0]']:dataGroupList[0]
	})
  },
  // 页面列表下拉，加载新数据
  loadData: function(){
	let pageNum = this.data.pageNum + 1;
	// 本次要加载的数据：
	this.setData({
	  ['dataList['+ pageNum +']']:currentLoadingData,
	  pageNum: pageNum
	})
  },
  
  // 获取目标一维数组
  getDataListMethod: function () {
    let dataList = [];
    ... // 获取dataList具体操作
    console.log(dataList);
    // [{...},{...},...{...}]
    return dataList;
  },

  /**
   * 对一维数组进行二维化
   * dataArray:源数组
   * subGroupLength:子数组元素的个数
   */ 
  groupArray: function(dataArray, subGroupLength) {
    let start = 0;
    let dataGroupArray = [];
    while(start < dataArray.length) {
      dataGroupArray.push(dataArray.slice(start, start += subGroupLength));
    }
    console.log(dataGroupArray);
    // [ [{...},{...},...,{...}], [...], [...], ..., [...] ]
    return dataGroupArray;
  },
})

<!--dataList.wxml-->
  <view wx:for="{{dataList}}" wx:for-item="pitem" wx:key="{{pindex}}">
    <view wx:for="{{pitem}}" wx:for-item="item" wx:key="{{index}}">
    	<text>item.xxx</text>
    	<text>item.yyy</text>
    </view>
  </view>