小程序如何避免setData的列表数据过大

按照分页的习惯,一般来说会把每一页请求的数据合并到上一次的数据中。就像这样

this.setData({
 categoryShopsList:this.data.categoryShopsList.concat(res.data.data.list)
})

对于小规模数据这样是非常方便快捷的。

那没问题来了,setdata官方建议的数据大小限制在1024kb,对于商品列表数据超过上千那种,最后concat在一起同时setdata 就会报错,数据量太大,影响内存消耗,渲染慢

这是需要避免和解决的问题

主要思想使用的是二维数组的方式去存储列表,

let Length = this.data.categoryShopsList.length;
that.setData({
    ['categoryShopsList[' + Length + ']']: res.data.data.list,
})

res.data.data.list 每一页请求过来的数据,存贮到对应的二维数组的对应的项中。

页面上上就需要两层遍历

<block wx:for="{{categoryShopsList}}" wx:for-item="listItem" wx:key="{{listItem}}">
     <view wx:for="{{listItem}}" wx:key="{{item}}" >
          ......................

这样每次在拿到下一页的数据时,只会setdata每次插入的数据。大大减少了setdata的大小。

 

posted @   10后程序员劝退师  阅读(4512)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示