微信小程序setData数据量过大问题的解决与分页刷新加载的实现 ...
发表时间:2021-2-28
发布人:葵宇科技
浏览次数:135
问题:从绿色框中可以看出,显示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>