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>
相关推荐
echo1754254 分钟前
Apipost免费版、企业版和私有化部署详解
java
谈不譚网安8 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板13 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩14 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真20 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
异常君21 分钟前
Java 高并发编程:等值判断的隐患与如何精确控制线程状态
java·后端·代码规范
异常君21 分钟前
Java 日期处理:SimpleDateFormat 线程安全问题及解决方案
java·后端·代码规范
都叫我大帅哥23 分钟前
Spring AI中的ChatClient:从入门到精通,一篇搞定!
java·spring·ai编程
都叫我大帅哥24 分钟前
《@SpringBootApplication:Spring Boot的"一键启动"按钮,还是程序员的"免死金牌"?》
java·后端·spring
triticale29 分钟前
P12167 [蓝桥杯 2025 省 C/Python A] 倒水
java·蓝桥杯