微信小程序之this.setData

Posted 2020-10-17 终极用户

setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。

注意：

1. 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData() 参数格式

接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。

其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

Page({
  data: {
    text: ‘init data‘,
    array: [{text: ‘init data‘}],
    object: {
      text: ‘init data‘
    }
  },
  changeText: function() {
    // this.data.text = ‘changed data‘  // bad, it can not work
    this.setData({
      text: ‘changed data‘
    })
  }

也可以保持不变直接传到视图层：

Page({
  data: {
    list:[
      {
        id:‘view‘,
        name:‘视图容器‘,
        open:false,
        pages:[‘view‘,‘scroll-view‘,‘swiper‘]
      },{
        id:‘content‘,
        name:‘基础内容‘,
        open:false,
        pages:[‘text‘,‘icon‘,‘progress‘]
      },{
        id:‘form‘,
        name:‘表单组件‘,
        open:false,
        pages:[‘button‘,‘checkbox‘,‘form‘,‘input‘,‘label‘,‘picker‘,‘radio‘,‘slider‘,‘switch‘,‘textarea‘]
      },{
        id:‘nav‘,
        name:‘导航‘,
        open:false,
        pages:[‘navigator‘]
      },{
        id:‘media‘,
        name:‘媒体组件‘,
        open:false,
        pages:[‘image‘,‘audio‘,‘vodeo‘]
      },{
        id:‘map‘,
        name:‘地图‘,
        pages:[‘map‘]
      },{
        id:‘canvas‘,
        name:‘画布‘,
        pages:[‘canvas‘]
      }
    ]
  },
  kindToggle:function(e){
    var id = e.currentTarget.id,list = this.data.list;
    for(var i =0,len = list.length;i<len;++i){
      if(list[i].id ==id){
        list[i].open = !list[i].open
      }else{
        list[i].open = false
      }
    }
    this.setData({
      list:list
    })
  }
 
})