uniapp 实现双击点赞出现特效

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

1. 创建点赞按钮

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

<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 部分，你需要实现双击检测的逻辑。你可以使用一个计时器来判断两次点击是否发生在短时间内。

<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 部分，你可以添加一些样式来增强视觉效果。

<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>