当前位置：首页 > VUE

Vue 实现左右滑动

2026-03-09 07:43:42VUE

实现左右滑动的常见方法

在Vue中实现左右滑动效果可以通过多种方式完成，以下是几种常见的方法：

使用CSS和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'],
      startX: 0,
      endX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      this.endX = e.touches[0].clientX;
    },
    handleTouchEnd() {
      if (this.startX - this.endX > 50) {
        // 向左滑动
      } else if (this.endX - this.startX > 50) {
        // 向右滑动
      }
    }
  }
}
</script>

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

使用Swiper.js库

Swiper是一个流行的触摸滑动库，专门为移动设备优化，支持Vue集成。

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

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
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>

使用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>

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

使用Vue Draggable

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

Vue 实现左右滑动

<template>
  <draggable 
    v-model="slides" 
    class="slider" 
    @start="drag=true" 
    @end="drag=false"
  >
    <div class="slide" v-for="(item, index) in slides" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

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