当前位置：首页 > VUE

vue实现刷卡

2026-03-07 11:02:36VUE

Vue 实现刷卡效果

要实现刷卡效果，可以通过 CSS 动画和 Vue 的事件绑定来模拟刷卡动作。以下是具体实现方法：

vue实现刷卡

使用 CSS 动画模拟刷卡

<template>
  <div class="card-container">
    <div 
      class="card" 
      @mousedown="startSwipe" 
      @mousemove="swipeCard" 
      @mouseup="endSwipe"
      @touchstart="startSwipe"
      @touchmove="swipeCard"
      @touchend="endSwipe"
      :style="{ transform: `translateX(${translateX}px)` }"
    >
      <!-- 卡片内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSwiping: false,
      startX: 0,
      translateX: 0
    }
  },
  methods: {
    startSwipe(e) {
      this.isSwiping = true
      this.startX = e.clientX || e.touches[0].clientX
    },
    swipeCard(e) {
      if (!this.isSwiping) return
      const currentX = e.clientX || e.touches[0].clientX
      this.translateX = currentX - this.startX
    },
    endSwipe() {
      this.isSwiping = false
      // 判断是否刷卡成功
      if (Math.abs(this.translateX) > 100) {
        // 刷卡成功逻辑
        this.$emit('swipe-success')
      }
      this.translateX = 0
    }
  }
}
</script>

<style>
.card-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  margin: 0 auto;
}

.card {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  position: relative;
  transform-style: preserve-3d;
}
</style>

使用第三方库实现更复杂效果

如果需要更专业的刷卡效果，可以考虑使用第三方库如：

vue实现刷卡

Hammer.js - 专门处理手势操作的库
```
import Hammer from 'hammerjs'
```

mounted() { const hammer = new Hammer(this.$el) hammer.on('swipe', (event) => { if (event.direction === Hammer.DIRECTION_RIGHT) { this.$emit('swipe-success') } }) }


2. Vue-Swipe-Card - 专为Vue设计的刷卡组件
```javascript
import VueSwipeCard from 'vue-swipe-card'

export default {
  components: {
    VueSwipeCard
  }
}

刷卡成功后的反馈

刷卡成功后可以添加视觉反馈：

methods: {
  handleSwipeSuccess() {
    // 添加成功动画
    this.$refs.card.classList.add('swipe-success')
    setTimeout(() => {
      this.$refs.card.classList.remove('swipe-success')
    }, 1000)
  }
}

.swipe-success {
  animation: swipeSuccess 1s ease;
}

@keyframes swipeSuccess {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(50px) scale(1.05); }
  100% { transform: translateX(0) scale(1); }
}

这些方法可以根据具体需求进行调整，实现从简单到复杂的各种刷卡效果。

标签: vue