uni-app实现点赞功能
时间: 2023-07-24 09:28:47 浏览: 150
要实现点赞功能,你可以按照以下步骤进行:
1. 在需要点赞的列表项中,添加一个“点赞”图标或按钮。
2. 在该列表项的数据中,添加一个“点赞数”字段,用于记录该列表项的点赞数。
3. 给“点赞”图标或按钮绑定点击事件。
4. 在点击事件中,使用uni.request()方法向后端发送请求,将该列表项的点赞数+1,并保存到后端数据库中。
5. 在请求成功后,更新该列表项的数据,将点赞数+1。
6. 在列表项的模板中,使用{{}}插值语法,将该列表项的点赞数显示在页面上。
以下是一个简单的示例代码:
```
<template>
<view>
<view v-for="(item, index) in list" :key="index">
<image :src="item.imgUrl"></image>
<text>{{ item.title }}</text>
<text @click="like(index)">点赞 {{ item.likeNum }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
imgUrl: 'xxx',
title: 'xxx',
likeNum: 0
},
{
imgUrl: 'xxx',
title: 'xxx',
likeNum: 0
}
]
}
},
methods: {
like(index) {
let item = this.list[index]
uni.request({
url: 'xxx',
method: 'POST',
data: {
id: item.id,
likeNum: item.likeNum + 1
},
success: (res) => {
if (res.data.code === 0) {
item.likeNum = item.likeNum + 1
}
}
})
}
}
}
</script>
```