微信小程序 列表页点赞

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.csdn.net/fengye002011/article/details/79211365