vue实现卡片左右滑动

Vue实现卡片左右滑动

使用Touch事件和CSS过渡

通过监听touchstart、touchmove和touchend事件，结合CSS的transform属性实现滑动效果。这种方法适合需要精细控制滑动行为的场景。

<template>
  <div 
    class="card-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    :style="{ transform: `translateX(${translateX}px)` }"
  >
    <div class="card" v-for="(card, index) in cards" :key="index">
      {{ card.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { content: 'Card 1' },
        { content: 'Card 2' },
        { content: 'Card 3' }
      ],
      startX: 0,
      currentX: 0,
      translateX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.currentX = e.touches[0].clientX
      this.translateX = this.currentX - this.startX
    },
    handleTouchEnd() {
      if (this.translateX > 100) {
        // 向右滑动超过阈值，执行操作
      } else if (this.translateX < -100) {
        // 向左滑动超过阈值，执行操作
      }
      this.translateX = 0
    }
  }
}
</script>

<style>
.card-container {
  display: flex;
  transition: transform 0.3s ease;
}
.card {
  width: 200px;
  height: 300px;
  margin: 10px;
  background: #eee;
  flex-shrink: 0;
}
</style>

使用第三方库（如Swiper.js）

Swiper.js是一个流行的滑动库，提供了丰富的配置选项和响应式设计，适合快速实现复杂的滑动效果。

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(card, index) in cards" :key="index">
      <div class="card">
        {{ card.content }}
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      cards: [
        { content: 'Card 1' },
        { content: 'Card 2' },
        { content: 'Card 3' }
      ],
      swiperOptions: {
        slidesPerView: 'auto',
        spaceBetween: 10,
        freeMode: true
      }
    }
  }
}
</script>

<style>
.card {
  width: 200px;
  height: 300px;
  background: #eee;
}
</style>

使用CSS Scroll Snap

CSS Scroll Snap是一种原生CSS解决方案，不需要JavaScript即可实现滑动效果，适合简单的滑动需求。

<template>
  <div class="scroll-container">
    <div class="card" v-for="(card, index) in cards" :key="index">
      {{ card.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { content: 'Card 1' },
        { content: 'Card 2' },
        { content: 'Card 3' }
      ]
    }
  }
}
</script>

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
}
.card {
  width: 200px;
  height: 300px;
  background: #eee;
  flex-shrink: 0;
  scroll-snap-align: start;
}
</style>

使用Vue Draggable

如果需要实现可拖拽的卡片滑动效果，可以使用vue-draggable库。

<template>
  <draggable 
    v-model="cards" 
    class="drag-container" 
    item-key="id"
    @start="drag=true" 
    @end="drag=false"
  >
    <template #item="{element}">
      <div class="card">
        {{ element.content }}
      </div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      cards: [
        { id: 1, content: 'Card 1' },
        { id: 2, content: 'Card 2' },
        { id: 3, content: 'Card 3' }
      ]
    }
  }
}
</script>

<style>
.drag-container {
  display: flex;
}
.card {
  width: 200px;
  height: 300px;
  margin: 10px;
  background: #eee;
}
</style>

每种方法都有其适用场景：原生实现适合轻量级需求，Swiper.js适合复杂交互，CSS Scroll Snap适合简单布局，而Vue Draggable适合需要重新排序的场景。根据项目需求选择最合适的方法。