微信小程序之this.setData

时间:2017-12-12 15:01:35   收藏:0   阅读:330

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

注意:

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

setData() 参数格式

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

其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].messagea.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
    })
  }
 
})

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!