在微信小程序开发过程中,虽然通过数据绑定可以将data中定义的数据渲染到页面,但是如果数据发生了变化,页面并不会同步更新数据。为了实现在数据变化时使页面同步更新,微信小程序提供了setData()方法,该方法可以立即改变data中的数据,并通过异步的方式将数据渲染到页面上。
setData()方法可以理解为数据更新。setData方法位于Page对象的原型链上:Page.prototype.setData。大多数情况下,我们使用this.setData的方式来调用这个方法。该方法的基本语法格式如下:
this.setData(data[, callback])
参数 | 类型 | 说明 |
---|---|---|
data | object | 当前要改变的数据 |
callback | function | setData()方法引起的页面更新渲染完毕后的回调函数 |
Page({ data:{ object:{ date:"2022年08月02日" }, title:"猕猴桃", postImg:"/uploadfile/myphoto/guoshu/mihoutao.jpg", content:"猕猴桃因猕猴喜欢吃,故名猕猴桃。猕猴桃中维生素C含量在水果中排名靠前,一个猕猴桃能提供一个人一日维生素C需求量的2倍多。猕猴桃还含有丰富的可溶性膳食纤维。具有生津润燥、预防便秘、消除忧郁等功效。", readingNum:899, collectionNum:{ array:[168] }, commentNum:7 }, onLoad:function(){ this.setData({ title:"羊桃藤、羊桃、阳桃" }); } });
这就是setData的基本用法。此外,setData参数中的key是非常灵活的,来看看key可能出现的形式。
Page({ onLoad:function(){ this.setData({ //key可以使用字符串来表示 "title":"羊桃藤、羊桃、阳桃", "collectionNum.array[0]":66, //更改collectionNum数组子元素的值 "object.date":"2022年08月03日" //更改object下的date的数值 }); } });
用this.setData所绑定或者更新的数据,并不要求在this.data中已预先定义。