当前位置：首页 > VUE

Vue 实现左右滑动

2026-03-29 19:22:59VUE

Vue 实现左右滑动的方法

使用 Touch 事件监听

在 Vue 中可以通过监听 touchstart、touchmove 和 touchend 事件来实现左右滑动效果。以下是一个简单的实现方式：

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="slider"
  >
    <div class="slider-content">
      <!-- 滑动内容 -->
    </div>
  </div>
</template>

<script>
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) {
        // 向右滑动
      }
    }
  }
}
</script>

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

使用第三方库

可以使用现成的 Vue 滑动组件库，例如 vue-touch 或 swiper。以下是使用 swiper 的示例：

安装 Swiper：
```
npm install swiper vue-awesome-swiper
```

在 Vue 中使用：


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

import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css'

export default { components: { Swiper, SwiperSlide }, data() { return { swiperOptions: { slidesPerView: 1, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } } }

```

使用 CSS 动画

可以通过 CSS 的 transform 和 transition 属性实现平滑的滑动效果：

Vue 实现左右滑动

<template>
  <div class="slider-container">
    <div 
      class="slider"
      :style="{ transform: `translateX(${offset}px)` }"
    >
      <div v-for="(item, index) in items" :key="index" class="slide">
        {{ item }}
      </div>
    </div>
    <button @click="slide(-100)">Prev</button>
    <button @click="slide(100)">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    slide(amount) {
      this.offset += amount
    }
  }
}
</script>

<style>
.slider-container {
  overflow: hidden;
  width: 300px;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
}
.slide {
  min-width: 100px;
  padding: 20px;
  background: #eee;
  margin-right: 10px;
}
</style>