setData
setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。
Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
具体的介绍请看微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
注意：
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
this.setData 两种情况赋值 触发渲染 页面
xxx.js 中 data 的数据
lunList: [ { id: 0, choose: false, }, { id: 1, choose: false, }, { id: 2, choose: false, } ] |
showlun: function (e) { var _this = this, index = e.currentTarget.dataset.id; console.log(e, index) //index,表示点击的第几个索引 if (_this.data.lunList[index].choose == false) { _this.data.lunList[index].choose=true } else { _this.data.lunList[index].choose=false } _this.setData({ lunList:_this.data.lunList }) console.log(_this.data.lunList) } |
ps：数据一旦过大，再js中操作整个数据渲染页面
showlun: function (e) { var _this = this, index = e.currentTarget.dataset.id; console.log(e, index) //重点 字符串组合的形式， this.setData 自动识别为 ["lunList[2].choose"] 这样直接操作 数据中的某一项直接赋值 var ss = 'lunList[' + index + '].choose' if (_this.data.lunList[index].choose == false) { _this.setData({ [ss]: true }) } else { _this.setData({ [ss]: false }) } console.log(_this.data.lunList) } |
ps：对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
一唯数组转为二维数组
如果删除list中的一个元素呢，怎么处理比较好
1.id 动态获取 使用字符串模板 渲染的数组 arr
this.setData({
[`arr[${id}]`]:null
})
2.wxml 进行判断不为null渲染 页面