当前位置：首页 > VUE

vue中实现左右滑动

2026-02-25 00:32:34VUE

实现左右滑动的常见方法

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

使用Touch事件 通过监听touchstart、touchmove和touchend事件，计算滑动距离和方向：

vue中实现左右滑动

export default {
  data() {
    return {
      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) {
        // 向右滑动
      }
    }
  }
}

使用CSS过渡动画 结合Vue的过渡系统实现平滑滑动效果：

<template>
  <div class="slider-container">
    <transition name="slide">
      <div class="slide-content" :key="currentIndex">
        <!-- 内容 -->
      </div>
    </transition>
  </div>
</template>

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

使用第三方库

vue中实现左右滑动

Vue-Awesome-Swiper：基于Swiper的Vue组件


import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

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

Vue-Slick：基于Slick的Vue组件

import VueSlick from 'vue-slick'
export default {
components: { VueSlick },
data() {
 return {
   slickOptions: {
     infinite: true,
     slidesToShow: 1,
     arrows: true
   }
 }
}
}

使用手势库 Hammer.js提供丰富的手势识别：

import Hammer from 'hammerjs'
export default {
  mounted() {
    const hammer = new Hammer(this.$el)
    hammer.on('swipeleft', () => {
      // 左滑处理
    })
    hammer.on('swiperight', () => {
      // 右滑处理
    })
  }
}