当前位置：首页 > VUE

vue实现滑动切换

2026-02-17 02:19:15VUE

实现滑动切换的基本思路

在Vue中实现滑动切换通常结合手势事件（如touchstart、touchmove、touchend）和CSS过渡动画。核心步骤包括监听触摸事件、计算滑动距离、触发组件切换逻辑。

方法一：使用原生事件与CSS过渡

监听触摸事件 在模板中绑定事件：

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

处理滑动逻辑

data() {
  return {
    startX: 0,
    offsetX: 0,
    currentIndex: 0
  }
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchMove(e) {
    const moveX = e.touches[0].clientX - this.startX;
    this.offsetX = moveX;
  },
  handleTouchEnd() {
    if (this.offsetX < -50) {
      // 向左滑动，切换到下一页
      this.currentIndex++;
    } else if (this.offsetX > 50) {
      // 向右滑动，切换到上一页
      this.currentIndex--;
    }
    this.offsetX = 0;
  }
}

CSS过渡效果

.slider-container {
  transition: transform 0.3s ease;
  display: flex;
  width: 100%;
}

方法二：使用第三方库（如vue-touch）

安装vue-touch库：

npm install vue-touch@next

注册插件

import VueTouch from 'vue-touch';
Vue.use(VueTouch, { name: 'v-touch' });

模板中使用滑动手势

<v-touch @swipeleft="nextSlide" @swiperight="prevSlide">
  <div class="slider-content">
    <!-- 内容 -->
  </div>
</v-touch>

切换逻辑

methods: {
  nextSlide() {
    this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
  },
  prevSlide() {
    this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
  }
}

方法三：结合Vue Transition组件

添加过渡效果

<transition :name="slideDirection">
  <div :key="currentIndex" class="slide-item">
    <!-- 动态内容 -->
  </div>
</transition>

动态过渡方向

data() {
  return {
    slideDirection: 'slide-left'
  }
},
methods: {
  goNext() {
    this.slideDirection = 'slide-left';
    this.currentIndex++;
  },
  goPrev() {
    this.slideDirection = 'slide-right';
    this.currentIndex--;
  }
}

CSS动画定义

vue实现滑动切换

.slide-left-enter-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 0.5s;
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}