微信小程序的常用setData方法

最新推荐文章于 2025-04-03 07:15:00 发布

Hahyy

最新推荐文章于 2025-04-03 07:15:00 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_42796144/article/details/104778125

版权

前言：setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。

常见的 setData 操作错误：

频繁的去setData。
每次 setData 都传递大量新数据。
后台态（用户不可见）页面进行 setData。

一、普通的setData数组/字段方法。

在这里插入图片描述

二、setData - 设置/修改对象或数组里某个属性的值

（1）key值带引号
在这里插入图片描述

（2）动态index类型：先将 key值用变量保存，key值使用时用[ ]引起来。

注意，是list[${e.currentTarget.dataset.index}].follow_status 。而不是this.data.list[${e.currentTarget.dataset.index}].follow_status
在这里插入图片描述

三、setData - 指定位置的元素值，实现只提交新加载的数据。同时，模板也需要相应改成二重循环:

let length = that.data.recommendVideoList.length;
that.setData({
                    ['recommendVideoList[' + length + ']']: res.data.data,
            })

当我们实现`上拉加载，分页功能`时，会习惯性的把之前存在的数据和新加载的数据从`concat`后，一起通过setData提交来重新渲染页面。这样会留下隐患，当用户浏览的数据量达到一定程度时，就会出现如上错误。

这是因为setData设置的数据量是有限制的，单次设置的数据大小不得超过1024kb

代码截图示例：
在这里插入图片描述
这时候的recommendVideoList为二维数组，每个子元素为一页 item 数据的集合，而子元素数组中的每个元素才是 item 数据，结构为：[[{…},{…},{…}],[{…},{…},{…}],[{…},{…},{…}],…]。你们也可以自己尝试打印出来。