当前位置：首页 > VUE

vue实现触摸轮播

2026-01-17 01:16:10VUE

Vue实现触摸轮播的方法

使用Vue实现触摸轮播可以通过结合手势事件和动画效果来完成。以下是几种常见的实现方式：

使用第三方库（如Swiper）

安装Swiper库并配置Vue组件：

npm install swiper

在Vue组件中使用：

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

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3']
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
      touchRatio: 1,
      grabCursor: true
    })
  }
}
</script>

自定义触摸事件实现

通过监听touchstart、touchmove和touchend事件来实现：

<template>
  <div class="carousel" 
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd">
    <div class="slides" :style="slideStyle">
      <div class="slide" v-for="(item, index) in slides" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      currentIndex: 0,
      startX: 0,
      moveX: 0,
      isDragging: false
    }
  },
  computed: {
    slideStyle() {
      return {
        transform: `translateX(${-this.currentIndex * 100 + this.moveX}%)`,
        transition: this.isDragging ? 'none' : 'transform 0.3s ease'
      }
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.isDragging = true
    },
    onTouchMove(e) {
      this.moveX = (e.touches[0].clientX - this.startX) / 10
    },
    onTouchEnd() {
      this.isDragging = false
      if (Math.abs(this.moveX) > 5) {
        this.currentIndex += this.moveX > 0 ? -1 : 1
      }
      this.moveX = 0
    }
  }
}
</script>

<style>
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slides {
  display: flex;
  width: 100%;
}
.slide {
  flex: 0 0 100%;
}
</style>

使用Vue专用轮播组件

可以考虑使用专门为Vue开发的轮播组件，如vue-awesome-swiper：

安装：

npm install vue-awesome-swiper swiper@5.4.5

使用示例：

<template>
  <swiper ref="mySwiper" :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/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        touchEventsTarget: 'container',
        resistanceRatio: 0,
        slidesPerView: 1,
        spaceBetween: 30,
        freeMode: true
      }
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的实现方式，第三方库通常提供更完善的触摸交互体验，而自定义实现则更灵活可控。

vue实现触摸轮播