微信小程序setData数据量过大问题的解决与分页刷新加载的实现 ... - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-2-28

发布人:葵宇科技

浏览次数:111


问题:从绿色框中可以看出,显示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>

相关案例查看更多