当前位置：首页 > VUE

vue左右滑动实现

2026-01-18 16:30:26VUE

实现 Vue 左右滑动功能

在 Vue 中实现左右滑动效果，可以通过以下几种方式实现：

使用 touch 事件监听

通过监听 touchstart、touchmove 和 touchend 事件来实现滑动效果。

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="slider"
  >
    <div class="slider-content" :style="{ transform: `translateX(${offsetX}px)` }">
      <!-- 滑动内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0,
      isDragging: false
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.isDragging = true
    },
    handleTouchMove(e) {
      if (!this.isDragging) return
      const currentX = e.touches[0].clientX
      this.offsetX = currentX - this.startX
    },
    handleTouchEnd() {
      this.isDragging = false
      // 滑动结束后处理逻辑
    }
  }
}
</script>

<style>
.slider {
  overflow: hidden;
  position: relative;
}
.slider-content {
  display: flex;
  transition: transform 0.3s ease;
}
</style>

使用第三方库（如 Swiper）

Swiper 是一个流行的滑动组件库，支持 Vue 集成。

<template>
  <swiper :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

使用 CSS Scroll Snap

CSS Scroll Snap 提供原生滚动对齐功能，适合简单滑动场景。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </div>
</template>

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

使用 Vue 过渡动画

结合 Vue 的过渡系统实现滑动动画效果。

<template>
  <transition name="slide">
    <div v-show="visible" class="slider-item">
      <!-- 内容 -->
    </div>
  </transition>
</template>

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

选择哪种实现方式取决于具体需求：