小程序數據綁定點贊效果切換（交流QQ羣：604788754）

若是對本例有更好的意見和建議，但願給予留言或是加羣跟羣主聯繫，交流學習。

WXML:

<block wx:for="{{nums}}" wx:for-index='idx' wx:for-item='item'>
  <view class="maxbox"  bindtap="imgchange" data-id="{{idx}}">
    <view class="zan">
      <image wx:if="{{ item.id == idx }}" class="zan01" src="img/zan1.png" ></image>
      <image wx:else class="zan01" src="img/zan2.png"></image>
    </view>
    <text class="nums">{{item.num}}</text>
  </view>
</block>

 JS:

Page({
  data: {
    nums: [
      { id: 0, num: 11 },
      { id: 1, num: 22 }
    ]
  },
  imgchange: function (event) {
    //獲取當前item的下標id  經過currentTarget.id
    //data-id
    var dataid = event.currentTarget.dataset.id;
    var nums = this.data.nums[dataid].num;
   //數據裏面的id;
    var ids = this.data.nums[dataid].id; 
    if ( dataid == ids ){
      nums++;
      this.data.nums[dataid].num = nums;
      this.data.nums[dataid].id = ids + 1; 
      this.setData({
        nums: this.data.nums
      });
    }else{
      nums--; 
      this.data.nums[dataid].id = ids - 1; 
      this.data.nums[dataid].num = nums;
      this.setData({
        nums: this.data.nums
      });
    }
  },
}) 

 效果以下：