uni-app实现点赞功能

1. 在pages文件夹下新建一个文件夹，取名为comment（可以自己随便取名），然后新建一个页面，取名为comment。

2. 在comment.vue中添加如下代码：

<template>
  <view class="container">
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小明</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小红</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      likeNum: 5,
      isLiked: false,
    };
  },
  methods: {
    addLike() {
      if (!this.isLiked) {
        this.likeNum++;
        this.isLiked = true;
      } else {
        this.likeNum--;
        this.isLiked = false;
      }
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #ddd;
  border-radius: 50%;
}

.content {
  flex: 1;
  margin-left: 10rpx;
}

.username {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.message {
  font-size: 28rpx;
}

.like {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}

.like .num {
  margin-left: 10rpx;
}

.iconfont {
  font-family: 'iconfont' !important;
}
</style>

3. 在static文件夹下新建一个iconfont文件夹，并将下载好的阿里图标库中的iconfont文件夹下的iconfont.ttf文件拷贝到static/iconfont文件夹下。

4. 在App.vue中引入阿里图标库的iconfont.css和uni.css：

<style>
@import url('~@/static/iconfont/iconfont.css');
@import url('~@/static/uni.css');
</style>

5. 在pages.json中添加如下代码：

{
  "path": "pages/comment/comment",
  "style": {
    "navigationBarTitleText": "评论",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  }
}

6. 运行项目即可看到点赞功能实现。

代码解析：

（1）在data中定义likeNum和isLiked，likeNum表示点赞数，isLiked表示当前用户是否已经点赞。初始化时将likeNum设为5（也可以根据需求自行修改），isLiked设为false。

（2）在addLike方法中根据isLiked判断当前用户是否已经点赞，如果没有点赞，点赞数加1，isLiked设为true；如果已经点赞，点赞数减1，isLiked设为false。

（3）在模板中使用:class动态绑定class，根据isLiked的值来给text标签绑定不同的iconfont类，实现点赞和取消点赞的效果。

（4）样式方面，使用了Flex布局，使布局更加美观简洁。添加了圆角、背景色等样式来优化界面。