![[微信小程序]实现列表点赞并让当前节点的图片改变,值加1完整实例代码加GIF图](/UploadFile/pic/shuiyin/20241101/bc08a46287554541b03463ed03556d81.jpg "[微信小程序]实现列表点赞并让当前节点的图片改变,值加1完整实例代码加GIF图")
实现列表点赞并让当前节点的图片改变,值加1完整实例代码
首先，我们需要在WXML中定义一个列表项模板，包含一个图片和一个点击事件。我们使用`wx:for`属性来循环遍历数据源中的每个元素。
```wxml
```
在JS中，我们需要定义两个函数：`zan`和`dan`。`zan`函数用于点赞，改变图片并加1；`dan`函数用于取消点赞，恢复原图。
```javascript// jsPage({
data: {
msg: [
{ id:1, is_say_yes: false },
{ id:2, is_say_yes: true },
{ id:3, is_say_yes: false }
]
},
zan(e) {
let id = e.currentTarget.dataset.id;
let msg = this.data.msg;
for (let i =0; i < msg.length; i++) {
if (msg[i].id == id) {
msg[i].is_say_yes = !msg[i].is_say_yes;
break;
}
}
this.setData({
msg: msg });
},
dan(e) {
let id = e.currentTarget.dataset.id;
let msg = this.data.msg;
for (let i =0; i < msg.length; i++) {
if (msg[i].id == id) {
msg[i].is_say_yes = !msg[i].is_say_yes;
break;
}
}
this.setData({
msg: msg });
}
});
```
完整实例代码
```wxml
Page({
data: {
msg: [
{ id:1, is_say_yes: false },
{ id:2, is_say_yes: true },
{ id:3, is_say_yes: false }
]
},
zan(e) {
let id = e.currentTarget.dataset.id;
let msg = this.data.msg;
for (let i =0; i < msg.length; i++) {
if (msg[i].id == id) {
msg[i].is_say_yes = !msg[i].is_say_yes;
break;
}
}
this.setData({
msg: msg });
},
dan(e) {
let id = e.currentTarget.dataset.id;
let msg = this.data.msg;
for (let i =0; i < msg.length; i++) {
if (msg[i].id == id) {
msg[i].is_say_yes = !msg[i].is_say_yes;
break;
}
}
this.setData({
msg: msg });
}
});
```
GIF图
