微信小程序——動態修改頁面數據(和樣式)及參數傳遞

1.1.1動態修改頁面數據

在小程序中我們經常要動態渲染數據，對於新手而言我們常常遇到修改的數據在控制台顯示和頁面顯示不一致，因為我們用“=”修改數據的，這種是可以修改，但無法改變頁面的狀態的，還會造成數據不一致，代碼如下：

data: {
    array: [{ text: '數組' }]
  }

onLoad:function(){
　　this.data.array[0].text=1;
　　console.log(this.data.array[0].text);
}

修改代碼：

onLoad:function(){
    // this.data.array[0].text=1;
    this.setData({
      'array[0].text': '1'
    })
    console.log(this.data.array[0].text);
  }

 

 

1.2.1參數傳遞及修改樣式

微信小程序的事件綁定中，我們常常需要傳遞參數及動態修改元素的樣式，但微信小程序不支持jQuery和DOM操作，即不能用這兩種方法修改樣式：

1、$("$id").css("color","red");

2、document.getElementById("id").style.color="red";

 

雖然微信小程序都不支持JQ和DOM操作，但有另外一套方法；下面我將實現點擊事件中傳參並修改元素的樣式，代碼如下：

<!-- 循環 -->
<view wx:for="{{isChecked}}" wx:key="index">
  <checkbox checked="{{item}}"></checkbox>
</view>

<!-- 循環 -->
<view wx:for="{{isChecked}}" wx:key="index">
  <!-- 先綁定click函數，通過自定義的屬性data-id傳參給click函數 -->
  <view class="vf {{item==true?'':'vf-active'}}" bindtap="click" data-id="{{index}}">{{index+1}}</view>
</view>

 

這里寫了兩個樣式，點擊之后“vf-active”的樣式才顯示出來

checkbox{ float: left; padding: 25rpx;
} .vf{ background: #666; color: #fff; height: 60rpx; width: 60rpx; float: left; margin: 30rpx; text-align: center; line-height: 60rpx; border-radius:10rpx; 
} .vf-active{ background: #07c160;
}

 

這里通過e.target.dataset動態獲取參數(也可以使用e.currentTarget.dataset，效果一樣)

Page({ data: { isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true] }, // 動態修改數據
  click: function (e) { console.log(e.target.dataset.id); var id = e.target.dataset.id var str = "isChecked[" + id + "]"//重點在這里，組合出一個字符串
    this.setData({ [str]: false//用中括號把str括起來即可
 }) }, onLoad:function(){ } })

 效果如下：

 

 

1.3.1使用setData修改數組或對象

前面已經講過要想動態修改數據就必須使用setData，數組和對象也一樣，但新手使用setData就容易遇到問題了：

 這樣修改直接報紅

 

在修改數組和對象的時候就直接將要修改的參數名寫成對應字符串就可以了，然后使用[]將字符串括起來，代碼如下：

var str = "isChecked[" + id + "]"//重點在這里，組合出一個字符串
this.setData({
   [str]: false//用中括號把str括起來即可
})

 

修改對象也一樣：

var ifo = "info[" + 0 + "].data"
this.setData({
    [ifo]:"這是修改后的"
})

 

總結：

1、直接用“=”賦值，這種是可以修改，但無法改變頁面的狀態的，還會造成數據不一致

2、this.setData，setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）

3、微信小程序不支持jQuery和DOM操作修改樣式，但可以先寫兩套樣式然后使用三元運算符

4、e.currentTarget.dataset和e.target.dataset都可以獲取數據效果一樣，除非遇到了事件冒泡，點擊查看區別