当前位置：首页 > VUE

vue实现刷卡

2026-02-10 11:10:58VUE

Vue 实现刷卡效果

实现刷卡效果通常涉及动画和交互设计，以下是一个基于 Vue 的实现方案：

安装依赖 确保项目中已安装 vue 和 vue-router（如需页面切换效果）。若需复杂动画，可引入 animate.css 或 gsap。

基础动画实现 通过 Vue 的过渡系统结合 CSS 实现滑动效果：

vue实现刷卡

<template>
  <div class="swipe-container">
    <transition name="swipe">
      <div v-if="showCard" class="card" @touchstart="startSwipe" @touchmove="moveSwipe" @touchend="endSwipe">
        <!-- 卡片内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCard: true,
      startX: 0,
      moveX: 0
    }
  },
  methods: {
    startSwipe(e) {
      this.startX = e.touches[0].clientX
    },
    moveSwipe(e) {
      this.moveX = e.touches[0].clientX - this.startX
      e.currentTarget.style.transform = `translateX(${this.moveX}px)`
    },
    endSwipe() {
      if (Math.abs(this.moveX) > 100) {
        this.showCard = false
        // 可在此处触发后续逻辑
      } else {
        this.$refs.card.style.transform = 'translateX(0)'
      }
    }
  }
}
</script>

<style>
.swipe-enter-active, .swipe-leave-active {
  transition: all 0.5s ease;
}
.swipe-enter, .swipe-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.card {
  width: 300px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

进阶手势控制 对于更精细的手势控制，可引入 hammer.js 或 interact.js：

import Hammer from 'hammerjs'

mounted() {
  const hammer = new Hammer(this.$refs.card)
  hammer.on('swipe', (event) => {
    if (event.direction === Hammer.DIRECTION_RIGHT) {
      // 右滑逻辑
    } else if (event.direction === Hammer.DIRECTION_LEFT) {
      // 左滑逻辑
    }
  })
}

组件化实现 封装为可复用组件：

vue实现刷卡

<!-- SwipeCard.vue -->
<template>
  <div class="swipe-card" ref="card" :style="cardStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    threshold: { type: Number, default: 100 }
  },
  data() {
    return {
      deltaX: 0,
      isSwiping: false
    }
  },
  computed: {
    cardStyle() {
      return {
        transform: `translateX(${this.deltaX}px)`,
        transition: this.isSwiping ? 'none' : 'transform 0.3s ease'
      }
    }
  },
  methods: {
    handleSwipe(direction) {
      this.$emit('swipe', direction)
    }
  },
  mounted() {
    // 添加手势事件监听
  }
}
</script>

注意事项