微信小程序 列表页点赞
wxml:
<view class='wish_list_box_collection' wx:if="{{item.collected==1}}">
<!-- 收藏过 -->
<image catchtap='onCollectionTap' src="../../images/index/collection_hover.png" data-index='{{index}}'></image>
<text>{{item.dzzs}}人想要</text>
</view>
<view class='wish_list_box_collection' wx:else>
<!-- 未收藏 -->
<image src='../../images/index/collection.png' catchtap='onCollectionTap' data-index='{{index}}'></image>
<text>想要</text>
</view>
</view>
js:
data:{
wishList:[
{
img: '../../images/index/wish.png',
dzzs: '22',
collected: 1,
id: 1
},
{
img: '../../images/index/wish.png',
dzzs: '33',
collected: 0,
id: 2
},
{
img: '../../images/index/wish.png',
dzzs: '44',
collected: 1,
id: 3
},
{
img: '../../images/index/wish.png',
dzzs: '555',
collected: 1,
id: 4
},
{
img: '../../images/index/wish.png',
dzzs: '666',
collected: 0,
id: 5
},
{
img: '../../images/index/wish.png',
dzzs: '777',
collected: 0,
id: 6
}
],
}
// 更改点赞状态
onCollectionTap: function (event) {
// 获取当前点击下标
var index = event.currentTarget.dataset.index;
// data中获取列表
var message = this.data.wishList;
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({
wishList: message
})
}
参考链接：https://blog.****.net/fengye002011/article/details/79211365