uni-app 怎么添加点赞标签符号

点赞需求分析

在 APP 或者小程序项目中，用户在阅读文章或者看视频时，会有点赞的功能，表示用户对当前的内容非常喜欢和认可，是一种用户和内容互动的方式。不过点赞也有2种效果。

低调点赞效果

如果只是像收藏功能一样，点击点赞图标后，状态变为“已赞”，图标颜色改变，就什么难度了。

冒泡点赞效果

如上图，现在比较流行的反馈效果是可以不停点赞，然后在全屏幕上出现一堆👍👍👍才能表达用户强烈的喜欢，也叫做冒泡效果，那么这种效果在 uni-app 开发中怎么实现呢？

需求难点分析

因为 uni-app 用的是 Vue 来开发 APP 或者是小程序，这个功能实现的难点就在于无限插入点赞图标，然后每一个图标需要加上往上飘的动画，最后离开可视范围时，需要移除这些节点。

发现没，光是做动画就挺费劲了，我决定找找看有没有能用的轮子，试了几个，最后推荐用下面这个。

还是通过点赞插件实现吧

• 插件名称：like-button
• 插件下载地址：https://github.com/lnice/like-button

使用方法

需要注意的是，这不是一个 npm 包，所以只能下载组件文件，拷贝到 uni-app 项目下的 components 目录，然后在 Vue 页面中引用。

<template>
  <like-button :src="buttonImg"></like-button>
</template>
<script>
  import likeButton from '@/components/like-button/like-button.vue'
  export default {
    components: { likeButton }
  }
</script>

属性说明

属性名	类型	默认值	说明
src	String	/static/logo.png	点击按钮图片
showImgs	Array	[‘//xxx’, ‘/static/logo.png’, ]	冒泡图片
duration	Number	5000	动画效果时间
range	Number	50	冒泡图片x轴摇摆幅度
high	Number	360	冒泡图片y轴飘出高度
width	Number	52	点赞图标宽度
height	Number	52	点赞图标高度
imgWidth	Number	52	冒泡图标宽度
imgHeight	Number	52	冒泡图标高度
throttle	Number	200	点击按钮 节流
site	Array,Object	[30, 160]	冒泡图片相对窗口x y坐标
large	Number,Boolean	false	缩放冒泡，为true默认放大2
alone	Boolean	true	1.0.9-新增, DOM元素逐渐消失

我们可以通过设置下面这些的属性，调整冒泡的效果。在项目中使用，我一般需要准备按钮图片和冒泡图片两个，其实都用默认值，整体效果非常不错。

支持事件

like-button 还支持 点赞点击事件 handleClick 和点赞动画完成事件 finished，直接在组件上 @handleClick="handleFun" 就可以了。

总结

这个点赞插件在小程序和 APP 上完美运行，官方说还支持 nvue 页面，不过我没试过，如果真的能运行，可以预测的是点赞的动画性能肯定会比 Vue 页面要好。