首页 APP开发 正文内容

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

2023年08月28日 , , , 106

这篇文章展示如何实现 APP 和小程序中点赞后符号满天飞的效果。

点赞需求分析

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

低调点赞效果

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

冒泡点赞效果

点赞冒泡效果
点赞冒泡效果

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

需求难点分析

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

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

还是通过点赞插件实现吧

使用方法

需要注意的是,这不是一个 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>

属性说明

属性名类型默认值说明
srcString/static/logo.png点击按钮图片
showImgsArray[‘//xxx’, ‘/static/logo.png’, ]冒泡图片
durationNumber5000动画效果时间
rangeNumber50冒泡图片x轴摇摆幅度
highNumber360冒泡图片y轴飘出高度
widthNumber52点赞图标宽度
heightNumber52点赞图标高度
imgWidthNumber52冒泡图标宽度
imgHeightNumber52冒泡图标高度
throttleNumber200点击按钮 节流
siteArray,Object[30, 160]冒泡图片相对窗口x y坐标
largeNumber,Booleanfalse缩放冒泡,为true默认放大2
aloneBooleantrue1.0.9-新增, DOM元素逐渐消失
like-button 支持的属性

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

支持事件

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

总结

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