当前位置：首页 > VUE

vue实现左右滑动

2026-02-11 06:02:55VUE

实现左右滑动的基本思路

在Vue中实现左右滑动效果，可以通过监听触摸事件（touchstart、touchmove、touchend）来计算滑动距离和方向。结合CSS的transform属性实现元素的平移效果。

使用原生事件监听

在Vue组件中直接添加事件监听，通过计算触摸起始点和结束点的差值判断滑动方向。

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

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      const currentX = e.touches[0].clientX
      this.offsetX = currentX - this.startX
    },
    handleTouchEnd() {
      // 滑动结束后的处理，如复位或切换页面
      this.offsetX = 0
    }
  }
}
</script>

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

使用第三方库

对于更复杂的滑动需求，可以使用专门的手势库如hammer.js或vue-touch。

安装hammer.js：

npm install hammerjs

在Vue中使用：

import Hammer from 'hammerjs'

export default {
  mounted() {
    const slider = this.$el
    const hammer = new Hammer(slider)

    hammer.on('pan', (e) => {
      this.offsetX = e.deltaX
    })

    hammer.on('panend', () => {
      // 滑动结束逻辑
    })
  }
}

实现轮播效果

结合滑动事件和自动轮播功能，可以创建完整的轮播组件。

data() {
  return {
    currentIndex: 0,
    itemWidth: 300, // 每个项目的宽度
    totalItems: 5   // 总项目数
  }
},
methods: {
  goToSlide(index) {
    this.currentIndex = Math.max(0, Math.min(index, this.totalItems - 1))
  },
  handleSwipe(direction) {
    if (direction === 'left') {
      this.goToSlide(this.currentIndex + 1)
    } else {
      this.goToSlide(this.currentIndex - 1)
    }
  }
}

响应式处理

添加窗口大小变化的监听，确保在不同屏幕尺寸下正常显示。

mounted() {
  window.addEventListener('resize', this.calculateItemWidth)
  this.calculateItemWidth()
},
beforeDestroy() {
  window.removeEventListener('resize', this.calculateItemWidth)
},
methods: {
  calculateItemWidth() {
    this.itemWidth = this.$el.clientWidth
  }
}