vue实现探探卡片

Vue 实现探探卡片效果

探探的卡片滑动效果主要依赖手势交互和动画过渡，以下是基于 Vue 的实现方法：

核心组件结构

<template>
  <div class="card-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <div 
      v-for="(card, index) in cards" 
      :key="card.id"
      :class="['card', { 'active': index === 0 }]"
      :style="{
        transform: index === 0 ? cardTransform : '',
        zIndex: cards.length - index
      }"
    >
      <img :src="card.image" />
    </div>
  </div>
</template>

手势交互逻辑

data() {
  return {
    cards: [...], // 卡片数据
    startX: 0,
    startY: 0,
    moveX: 0,
    moveY: 0,
    cardTransform: '',
    isDragging: false
  }
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
    this.isDragging = true
  },

  handleTouchMove(e) {
    if (!this.isDragging) return
    this.moveX = e.touches[0].clientX - this.startX
    this.moveY = e.touches[0].clientY - this.startY

    const rotation = this.moveX * 0.1
    this.cardTransform = `translate(${this.moveX}px, ${this.moveY}px) rotate(${rotation}deg)`
  },

  handleTouchEnd() {
    if (!this.isDragging) return
    this.isDragging = false

    // 判断滑动距离决定是否移除卡片
    if (Math.abs(this.moveX) > 100) {
      this.removeCard()
    } else {
      this.resetCardPosition()
    }
  },

  removeCard() {
    this.cards.shift()
    this.resetCardPosition()
  },

  resetCardPosition() {
    this.cardTransform = ''
    this.moveX = 0
    this.moveY = 0
  }
}

CSS 样式关键部分

.card-container {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

高级功能扩展

1. 添加喜欢/不喜欢按钮

   
   methods: {
   like() {
    this.cardTransform = 'translate(200px, 0) rotate(30deg)'
    setTimeout(() => this.removeCard(), 300)
   },

dislike() { this.cardTransform = 'translate(-200px, 0) rotate(-30deg)' setTimeout(() => this.removeCard(), 300) } }

2. 卡片堆叠效果
```css
.card:not(.active) {
  transform: scale(0.9) translateY(20px);
  opacity: 0.8;
}

1. 添加动画过渡

   watch: {
   cards(newVal) {
    if (newVal.length < 3) {
      // 加载更多卡片
    }
   }
   }

性能优化建议

• 使用 Vue 的 <transition-group> 处理卡片进出动画
• 对卡片图片进行懒加载
• 使用 requestAnimationFrame 优化动画性能
• 限制同时渲染的卡片数量(通常3-5张)

以上实现包含了探探卡片的核心交互逻辑，可根据实际需求调整样式和动画细节。