微信小程序实现循环列表的点赞和取消点赞功能。下面是代码部分：
WXML：
代码语言：javascript复制<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>goodsList 是商品列表，通过判断 collected 的值来更换图片，当然也可以拓展一下，把文字的颜色也修改了。
给元素绑定一个事件，点击时进行点赞/取消点赞的操作，并弹出相应的提示。
JS：
代码语言：javascript复制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
})
},效果图：
我把写好的 Demo 放在 GitHub 上面了，需要的可以：点击直达
