小程序数据绑定点赞效果切换（交流QQ群：604788754）
如果对本例有更好的意见和建议，希望给予留言或是加群跟群主联系，交流学习。
WXML:
<block wx:for="{{nums}}" wx:for-index='idx' wx:for-item='item'>
<view class="maxbox" bindtap="imgchange" data->
<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
});
}
},
})
效果如下：