- 参数接受一个对象,以 key,value 的形式表示
- 可以一下设置一个或多个data数据
this.setData({ list:'change data', info:'change data' }) 复制代码
- key可以以数据路径的形式给出(路径形式的key必须带引号)+数据可以不预设
this.setData({ 'array[0].text':'changed data' //数据路径key必须带‘’引号 }) this.setData({ 'object.text': 'changed data' //数据路径key必须带‘’引号 }); 等于 this.setData({ object:{ text: 'changed data' } });复制代码
- key值可以为变量,为变量的时候要用[ ]引起来
page({ data:{ todos:[ {id:0,text:'abc',isDelete:false}, {id:1,text:'abc',isDelete:false}, {id:2,text:'abc',isDelete:false} ] //array }, change(e){ var index = e.currentTarget.dataset.id; var deletedtodo='todos['+index+'].idDelete'; this.setData({ [deletedtodo]:true }) } }) 复制代码
- 单次设置的数据不能超过1024KB,请尽量避免一次设置过多的数据 一般情况下,更新items的操作可能如下:
loadItems() { //假设通过API获取到新的列表数据:newItems const { items } = this.data; //deconstructing... items from this.data; this.setData({ items: items.concat(newItems) //append new data... })}//The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.//复制代码
如果完整items的数据量不大的时候,这样做也是可以的,但是列表的数据比较多的时候,后面loadItems时setData的数据就会变很大,超过一定值(1048576)后就会报以下错误,然后列表无法再加载更多
数据传输长度为 xxxxxx 已经超过最大长度 1048576
若遇到这样的情况,我的解决方法是
loadItems() { //依然假设通过API获取到新的列表数据:newItems const { items } = this.data; const start = items.length; const updateItems = newItems.reduce((updateItems, item, index) => { updateItems[`items[${start + index}]`] = item; //use template literal return updateItems; }, {//inital values of updateItems//}) //this is {} //updateItems 示例: { items[0]: 'content', items[1]: 'content', ... } this.setData(updateItems)}复制代码
GREAT idea!!
方法一、
Page({ data: { list: [ 1, 2, 3 ] }, /** * Lifecycle function--Called when page load */ onLoad: function (options) { let that = this; let self = that.data; var newList = [4,5]; let length = self.list.length; console.log(length) let newData = newList.reduce((acc, v, i) => { acc[`list[${length + i}]`] = v; return acc; }, {});//return a {} console.log(newData) that.setData(newData) console.log(self) },)}复制代码
方法二、
data: { list: [[1, 1], [2, 2], [3, 3]]},/** * Lifecycle function--Called when page load */onLoad: function (options) { let that = this; let self = that.data; var newList = [4, 4]; let length = self.list.length; console.log(length) var newData = {}; newData[`list[${length}]`] = newList; console.log(newData) that.setData(newData) console.log(self)},复制代码
- 可以定义变量名称一致
// example/test/test.js
Page({ data: { ceshi: [2,3,4] }, /** * Lifecycle function--Called when page load */ /** * Lifecycle function--Called when page is initially rendered */ onReady: function () { var ceshi=this.data.ceshi; ceshi.push(5) this.setData( {ceshi} //this will overwrite the ceshi key in data object ) console.log(ceshix) console.log(this.data) },复制代码
在方法中,我们定义ceshi变量让其等于that.data.ceshi; 然后对ceshi进行操作,其实就是对that.data.ceshi进行操作,而that.setData({ceshi})就等同于that.setData({ceshi : ceshi }) ;