微信小程序之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
    })