vue 左右滑动实现

实现 Vue 左右滑动功能

在 Vue 中实现左右滑动功能通常可以通过以下几种方式完成，具体选择取决于项目需求和复杂度。

使用第三方库（如 Swiper）

Swiper 是一个流行的滑动库，支持 Vue 集成，适用于复杂的滑动场景。

安装 Swiper：

npm install swiper vue-awesome-swiper

在组件中使用：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

使用原生 Touch 事件

对于简单的滑动需求，可以通过监听 touchstart、touchmove 和 touchend 事件实现。

<template>
  <div 
    class="slider"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <div class="slide" v-for="(item, index) in slides" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      touchStartX: 0,
      touchEndX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.touchStartX = e.changedTouches[0].screenX
    },
    handleTouchMove(e) {
      this.touchEndX = e.changedTouches[0].screenX
    },
    handleTouchEnd() {
      if (this.touchStartX - this.touchEndX > 50) {
        // 向左滑动
      }
      if (this.touchEndX - this.touchStartX > 50) {
        // 向右滑动
      }
    }
  }
}
</script>

<style>
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
  min-width: 100%;
}
</style>

使用 CSS Scroll Snap

CSS Scroll Snap 提供了一种简单的方式实现滑动效果，无需 JavaScript。

<template>
  <div class="slider">
    <div class="slide" v-for="(item, index) in slides" :key="index">
      {{ item }}
    </div>
  </div>
</template>

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

<style>
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
  min-width: 100%;
}
</style>

使用 Vue 过渡动画

结合 Vue 的 <transition> 组件可以实现滑动动画效果。

<template>
  <div class="slider-container">
    <transition :name="transitionName">
      <div class="slide" :key="currentIndex">
        {{ slides[currentIndex] }}
      </div>
    </transition>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      currentIndex: 0,
      transitionName: 'slide-next'
    }
  },
  methods: {
    next() {
      this.transitionName = 'slide-next'
      this.currentIndex = (this.currentIndex + 1) % this.slides.length
    },
    prev() {
      this.transitionName = 'slide-prev'
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length
    }
  }
}
</script>

<style>
.slide {
  position: absolute;
  width: 100%;
}
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
  transition: transform 0.5s;
}
.slide-next-enter-from {
  transform: translateX(100%);
}
.slide-next-leave-to {
  transform: translateX(-100%);
}
.slide-prev-enter-from {
  transform: translateX(-100%);
}
.slide-prev-leave-to {
  transform: translateX(100%);
}
</style>

以上方法可以根据具体需求选择，第三方库适合复杂场景，原生实现适合轻量需求，CSS 方案适合简单滑动，过渡动画适合需要视觉效果的情况。