vue 左右滑动实现

Vue 实现左右滑动的方案

使用 touch 事件监听

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

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

<script>
export default {
  data() {
    return {
      startX: 0,
      moveX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.moveX = e.touches[0].clientX - this.startX
    },
    handleTouchEnd() {
      if (Math.abs(this.moveX) > 50) {
        if (this.moveX > 0) {
          // 向右滑动逻辑
        } else {
          // 向左滑动逻辑
        }
      }
    }
  }
}
</script>

使用第三方库

引入 swiper 或 vue-awesome-swiper 库可以快速实现滑动效果。

安装 swiper:

npm install swiper vue-awesome-swiper

使用示例:

<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 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

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

使用 CSS 过渡效果

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

<template>
  <div class="slider-container">
    <div 
      class="slider-content"
      :style="{ transform: `translateX(${offsetX}px)` }"
    >
      <!-- 滑动内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offsetX: 0
    }
  },
  methods: {
    slide(direction) {
      const distance = 300 // 滑动距离
      this.offsetX = direction === 'left' 
        ? this.offsetX - distance 
        : this.offsetX + distance
    }
  }
}
</script>

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

结合手势库

使用 hammer.js 等手势库可以更便捷地处理复杂手势。

安装:

npm install hammerjs

使用示例:

<template>
  <div ref="swipeElement"></div>
</template>

<script>
import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$refs.swipeElement)
    hammer.on('swipeleft', () => {
      // 左滑处理
    })
    hammer.on('swiperight', () => {
      // 右滑处理
    })
  }
}
</script>

选择合适的方法取决于项目需求复杂度。简单交互可使用原生事件，复杂场景推荐使用成熟库如 swiper 或 hammer.js。