微信小程序实现循环点赞

wxml
<view class='page_container'> <view class='good-item' wx:for='{{goodsList}}'> <image class='good-img' src='{{item.img}}' mode='widthFix'></image> <view class='fav-box'> <!-- 收藏过否 --> <image class='fav-icon' catchtap='onCollectionTap' src="image/fav{{item.collected?'_on':''}}.png" data-index='{{index}}'></image> <text>{{item.dzzs}}人想要</text> </view> </view> </view>
js
data: {
goodsList: [{
img: ‘image/mi.jpg’,
dzzs: ‘22’,
collected: 1,
id: 1
},
{
img: ‘image/mi.jpg’,
dzzs: ‘33’,
collected: 0,
id: 2
},
],
},
// 更改点赞状态
onCollectionTap: function(event) {
// 获取当前点击下标
var index = event.currentTarget.dataset.index;
// data中获取列表
var message = this.data.goodsList;
for (let i in message) { //遍历列表数据
if (i == index) { //根据下标找到目标
var collectStatus = false
if (message[i].collected == 0) { //如果是没点赞+1
collectStatus = true
message[i].collected = parseInt(message[i].collected) + 1
} else {
collectStatus = false
message[i].collected = parseInt(message[i].collected) - 1
}
wx.showToast({
title: collectStatus ? ‘收藏成功’ : ‘取消收藏’,
})
}
}
this.setData({
goodsList: message
})
},