当前位置：首页 > VUE

vue如何实现探探

2026-01-19 13:23:56VUE

Vue实现探探卡片滑动效果

核心思路 使用Vue结合手势库（如hammer.js）或原生Touch事件实现卡片滑动、旋转及飞出的动画效果。关键点在于卡片堆叠布局、触摸事件监听和CSS过渡动画。

具体实现步骤

1. 基础布局与数据绑定 使用Vue的v-for渲染卡片堆叠结构，通过z-index和绝对定位实现层叠效果。数据驱动卡片状态变化。

<template>
  <div class="card-container">
    <div 
      v-for="(card, index) in cards" 
      :key="card.id"
      :style="cardStyle(index)"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      class="card"
    >
      <img :src="card.image" />
    </div>
  </div>
</template>

2. 触摸事件处理 记录触摸起始位置和移动距离，计算卡片偏移量和旋转角度。

data() {
  return {
    startX: 0,
    startY: 0,
    moveX: 0,
    moveY: 0,
    cards: [...] // 卡片数据
  }
},
methods: {
  touchStart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
  },
  touchMove(e) {
    this.moveX = e.touches[0].clientX - this.startX
    this.moveY = e.touches[0].clientY - this.startY
    // 实时更新卡片transform样式
  }
}

3. 卡片飞出动画 当滑动距离超过阈值时，触发飞出动画并移除卡片。

touchEnd() {
  const threshold = 100
  if (Math.abs(this.moveX) > threshold) {
    const direction = this.moveX > 0 ? 'right' : 'left'
    this.animateCardOut(direction)
    this.cards.shift() // 移除顶部卡片
  } else {
    this.resetCardPosition()
  }
}

4. CSS动画效果 使用transform实现平滑的位移和旋转动画，transition控制动画速度曲线。

.card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center bottom;
}
.card-animate-out {
  transform: translateX(200px) rotate(30deg);
  opacity: 0;
}

5. 按钮控制实现 添加喜欢/不喜欢按钮，模拟滑动效果。

methods: {
  like() {
    this.animateCardOut('right')
    this.cards.shift()
  },
  dislike() {
    this.animateCardOut('left')
    this.cards.shift()
  }
}

优化建议