您当前的位置:首页 > 微信小程序开发笔记 >

setData()数据绑定更新

0

在微信小程序开发过程中,虽然通过数据绑定可以将data中定义的数据渲染到页面,但是如果数据发生了变化,页面并不会同步更新数据。为了实现在数据变化时使页面同步更新,微信小程序提供了setData()方法,该方法可以立即改变data中的数据,并通过异步的方式将数据渲染到页面上。

setData()方法可以理解为数据更新。setData方法位于Page对象的原型链上:Page.prototype.setData。大多数情况下,我们使用this.setData的方式来调用这个方法。该方法的基本语法格式如下:

this.setData(data[, callback])

setData()方法的参数
参数类型说明
dataobject当前要改变的数据
callbackfunctionsetData()方法引起的页面更新渲染完毕后的回调函数
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中已预先定义。

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部