uniapp 实现双击点赞出现特效

更新一下 老板改了需求要加上特效

1. 创建点赞按钮

首先,在你的页面中创建一个点赞按钮 全局点赞的话就写在最外面的标签就行了。你可以使用 <button> 组件或者自定义一个视图组件。

javascript 复制代码
<template>  
  <view class="container">  
    <button @click="handleTap" :class="{ doubleTap: isDoubleTap }">点赞</button>  
    <image v-if="showHeart" src="/static/heart.png" class="heart-animation" />  
  </view>  
</template>

这里我们使用了 @click 事件监听器来监听按钮的点击事件,并且使用了 :class 绑定来根据 isDoubleTap 的值改变按钮的样式(可选)。showHeart 用于控制小心心的显示与隐藏。

2. 实现双击检测

在 JavaScript 部分,你需要实现双击检测的逻辑。你可以使用一个计时器来判断两次点击是否发生在短时间内。

javascript 复制代码
<script>  
export default {  
  data() {  
    return {  
      tapCount: 0,  
      tapTimer: null,  
      isDoubleTap: false,  
      showHeart: false  
    };  
  },  
  methods: {  
    handleTap() {  
      this.tapCount++;  
      if (this.tapCount === 1) {  
        // 第一次点击,设置计时器  
        this.tapTimer = setTimeout(() => {  
          this.tapCount = 0; // 重置点击次数  
          this.isDoubleTap = false; // 重置双击状态  
        }, 200); // 设定双击的时间间隔,比如200毫秒  
      } else if (this.tapCount === 2) {  
        // 如果在短时间内发生了第二次点击,则认为是双击  
        clearTimeout(this.tapTimer); // 清除计时器  
        this.isDoubleTap = true; // 设置双击状态为true  
        this.tapCount = 0; // 重置点击次数  
        this.showHeart = true; // 显示小心心  
        // 你可以在这里添加发送点赞请求的代码  
          
        // 小心心显示一段时间后隐藏  
        setTimeout(() => {  
          this.showHeart = false;  
        }, 1000); // 设定小心心显示的持续时间,比如1秒  
      }  
    }  
  }  
};  
</script>

3. 添加样式

在 CSS 部分,你可以添加一些样式来增强视觉效果。

javascript 复制代码
<style>  
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
}  
  
button {  
  padding: 10px 20px;  
  background-color: #f4f4f4;  
  border: none;  
  border-radius: 5px;  
  cursor: pointer;  
}  
  
.doubleTap {  
  /* 这里可以添加双击时的样式变化,比如放大、变色等 */  
  transform: scale(1.1);  
}  
  
.heart-animation {  
  width: 50px; /* 根据你的小心心图片大小调整 */  
  height: 50px; /* 根据你的小心心图片大小调整 */  
  margin-top: 20px;  
  animation: heartBounce 1s ease-in-out forwards; /* 添加动画效果 */  
}  
  
@keyframes heartBounce {  
  0% { transform: scale(1); opacity: 1; }  
  50% { transform: scale(1.2); opacity: 0.8; }  
  100% { transform: scale(1); opacity: 1; }  
}  
</style>
相关推荐
掘金一周3 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队21 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
腥臭腐朽的日子熠熠生辉30 分钟前
解决maven失效问题(现象:maven中只有jdk的工具包,没有springboot的包)
java·spring boot·maven
ejinxian32 分钟前
Spring AI Alibaba 快速开发生成式 Java AI 应用
java·人工智能·spring
杉之37 分钟前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
俏布斯1 小时前
算法日常记录
java·算法·leetcode