微信小程序之this.setData

Page.prototype.setData()

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' }) }

先说一下基本使用。官网也有。

好比说你在main.js里面有这些变量。想修改某些值。

data: {
main_view_bgcolor: "",
border: "",
}

修改方式有两种，一是直接用“=”赋值，这种是能够修改，而且你把修改以后的值打印出来能够看到确实修改了，可是不推荐使用这样的方式。

由于，通常咱们想修改data里面的值，每每都是由于这些数据都在main.wxml中绑定了，能够实现动态修改并实时刷新显示。刚刚这种方式容易发生数据被修改可是页面没有变化。

因此说一下下面这种方式：

在你绑定的自定义函数（每每都是绑定的点击事件）里面，

this.setData({
border:"aa"//这个border跟上面data里面的border是对应的。
})

这种方式，点击以后触发事件，执行函数，更新数据，同时能够实时更新渲染界面。

二、高能高能，这个就是那个都是瓶渣子的坑（哭状）

  data: {
    main_view_bgcolor: "",
    border: "",
    isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true]
}

如上，若是我想动态修改isChecked里面指定某个下标的值怎么办？

首先我先喷一句，这是百度知道网友给的回答。https://zhidao.baidu.com/question/1434931285716531579.html

你TM就不能把代码多粘贴一点？会死啊？鬼知道你写的什么意思。

好了（故做正经），下面我来讲怎么动态修改一个对象的某元素的值。上面这个是索引下标，等会还有个key-value的例子。

代码：

click: function (e) {    
    var id = e.target.id//根据点击不一样的view获取对应的id值
    var str = "isChecked[" + id + "]"//重点在这里，组合出一个字符串
    this.setData({
      [str]: false//用中括号把str括起来便可
    })
}

看注释。点击->触发对应事件->来到click函数这里，根据点击的view获取对应的id，修改指定下标的isChecked。

上面这个isChecked的索引是从0到n的，便可以经过isChecked[0]、isChecked[1]来访问。能够在操做的过程当中打印日志看一下数据类型。

哦，对了，在wxml中若是要绑定isChecked中元素的值，能够这么：

<view class="{{isChecked[2]?'main_view':'main_view_clicked'}}" bindtap='click' bindlongpress='cancelclick' id='2' bindtap='click'></view>

不要在乎那个三目运算，反正相似于js中访问方式，也是isChecked[index]。同理，下面的key-value类型的就能够经过isChecked[index].key来绑定数据了。

下面是key-value类型的：

data: {
    main_view_bgcolor: "",
    border: "",
    isChecked: [
      { 
        key: true 
      },
      { 
        key: true 
      },
      { 
        key: true
      }
    ]
}

直接写操做方式了（由于就跟上面只有一点点的区别）：

    var str = "isChecked[" + id + "].key"
    this.setData({
      [str]: false
    })