当前位置：首页 > VUE

vue实现探探卡片

2026-01-17 03:10:22VUE

Vue 实现探探卡片效果

探探卡片的交互效果主要包括卡片堆叠、左右滑动、缩放和旋转动画。以下是基于 Vue 3 的实现方法：

核心组件结构

使用 v-for 渲染卡片列表，通过 CSS 绝对定位实现堆叠效果：

<template>
  <div class="cards-container">
    <div 
      v-for="(card, index) in cards" 
      :key="card.id"
      :style="getCardStyle(index)"
      @touchstart="startDrag"
      @touchmove="onDrag"
      @touchend="endDrag"
      class="card"
    >
      <!-- 卡片内容 -->
    </div>
  </div>
</template>

卡片样式与堆叠

通过 CSS 实现基础卡片样式和层叠效果：

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

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

拖拽交互逻辑

实现触摸事件处理函数，计算拖拽偏移量：

setup() {
  const cards = ref([...]);
  const startX = ref(0);
  const currentX = ref(0);
  const isDragging = ref(false);
  const currentCardIndex = ref(0);

  const startDrag = (e) => {
    startX.value = e.touches[0].clientX;
    isDragging.value = true;
  };

  const onDrag = (e) => {
    if (!isDragging.value) return;
    currentX.value = e.touches[0].clientX - startX.value;
    // 更新卡片位置
  };

  const endDrag = () => {
    if (Math.abs(currentX.value) > 100) {
      // 判断左滑或右滑
      removeCard();
    } else {
      // 回弹动画
      resetCardPosition();
    }
    isDragging.value = false;
  };

  return { cards, startDrag, onDrag, endDrag };
}

动画效果实现

动态计算卡片变换样式：

const getCardStyle = (index) => {
  const scale = 1 - index * 0.05;
  const yOffset = index * 10;
  let rotate = 0;

  if (index === 0 && isDragging.value) {
    rotate = currentX.value * 0.1;
  }

  return {
    transform: `
      translateY(${yOffset}px)
      scale(${scale})
      rotate(${rotate}deg)
      translateX(${index === 0 ? currentX.value : 0}px)
    `,
    zIndex: cards.value.length - index
  };
};

卡片移除与新增

实现滑动后的卡片移除逻辑：

const removeCard = () => {
  cards.value.shift();
  currentCardIndex.value++;
  currentX.value = 0;

  // 可以在这里添加新卡片
  if (cards.value.length < 3) {
    addNewCard();
  }
};

const addNewCard = () => {
  cards.value.push({
    id: generateId(),
    // 新卡片数据
  });
};