当前位置：首页 > VUE

vue实现卡片叠加滑动

2026-02-22 13:00:04VUE

Vue 实现卡片叠加滑动效果

实现卡片叠加滑动效果可以通过 CSS 结合 Vue 的动态数据绑定和过渡动画完成。以下是具体实现方法：

依赖准备 确保项目中已安装 Vue 及相关动画库（如 vue-transition 或直接使用原生 CSS 过渡）。

基本数据结构 在 Vue 的 data 中定义卡片数组和当前激活的卡片索引：

data() {
  return {
    cards: [
      { id: 1, title: 'Card 1' },
      { id: 2, title: 'Card 2' },
      { id: 3, title: 'Card 3' }
    ],
    activeIndex: 0
  }
}

模板结构 使用 v-for 渲染卡片，并通过 z-index 和 transform 控制叠加效果：

<div class="card-container">
  <div 
    v-for="(card, index) in cards"
    :key="card.id"
    class="card"
    :style="{
      zIndex: cards.length - index,
      transform: getCardTransform(index)
    }"
    @click="activateCard(index)"
  >
    {{ card.title }}
  </div>
</div>

样式设计 通过 CSS 实现叠加和滑动动画：

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

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

动态位置计算 在 Vue 方法中计算每张卡片的偏移量：

methods: {
  getCardTransform(index) {
    const offset = 20; // 叠加偏移量
    const activeOffset = index === this.activeIndex ? 0 : 10;
    return `translate(${index * offset}px, ${index * offset - activeOffset}px)`;
  },
  activateCard(index) {
    this.activeIndex = index;
  }
}

进阶交互 添加滑动动画和手势控制（需引入 hammerjs 等库）：

import Hammer from 'hammerjs';

mounted() {
  const container = document.querySelector('.card-container');
  const hammer = new Hammer(container);
  hammer.on('swipeleft', () => {
    this.activeIndex = Math.min(this.activeIndex + 1, this.cards.length - 1);
  });
  hammer.on('swiperight', () => {
    this.activeIndex = Math.max(this.activeIndex - 1, 0);
  });
}

响应式调整 通过 Vue 的 computed 属性实现响应式布局：

computed: {
  visibleCards() {
    return this.cards.slice(
      Math.max(0, this.activeIndex - 2),
      this.activeIndex + 1
    ).reverse();
  }
}

最终效果