用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2021-2-25 15:32

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


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

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

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

  1. 一次性将所有的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提交数据的做法:

  1. 将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>
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏