当前位置：首页 > VUE

vue实现滑动切换路由

2026-01-21 15:22:58VUE

vue实现滑动切换路由的方法

使用vue-router和touch事件监听

在Vue项目中结合vue-router和移动端touch事件可以实现滑动切换路由效果。需要监听touchstart、touchmove和touchend事件，计算滑动距离和方向。

// 在App.vue或布局组件中添加以下代码
export default {
  data() {
    return {
      startX: 0,
      endX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchEnd(e) {
      this.endX = e.changedTouches[0].clientX
      this.handleSwipe()
    },
    handleSwipe() {
      const diffX = this.endX - this.startX
      if (Math.abs(diffX) > 50) { // 滑动阈值
        if (diffX > 0) {
          // 向右滑动，返回上一页
          this.$router.go(-1)
        } else {
          // 向左滑动，前往下一页
          // 需要预先定义路由顺序
          const nextRoute = this.getNextRoute()
          nextRoute && this.$router.push(nextRoute)
        }
      }
    },
    getNextRoute() {
      // 根据当前路由返回下一个路由路径
      const routes = ['/', '/about', '/contact']
      const currentIndex = routes.indexOf(this.$route.path)
      return currentIndex < routes.length - 1 ? routes[currentIndex + 1] : null
    }
  },
  mounted() {
    document.addEventListener('touchstart', this.handleTouchStart)
    document.addEventListener('touchend', this.handleTouchEnd)
  },
  beforeDestroy() {
    document.removeEventListener('touchstart', this.handleTouchStart)
    document.removeEventListener('touchend', this.handleTouchEnd)
  }
}

使用vue-touch插件

vue-touch插件提供了更便捷的手势识别方式，可以简化滑动事件处理。

安装插件：

npm install vue-touch@next

配置使用：

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch, {name: 'v-touch'})

// 在组件中使用
<v-touch @swipeleft="nextRoute" @swiperight="prevRoute">
  <router-view/>
</v-touch>

methods: {
  nextRoute() {
    const next = this.getNextRoute()
    next && this.$router.push(next)
  },
  prevRoute() {
    this.$router.go(-1)
  }
}

结合transition实现动画效果

为路由切换添加滑动动画可以提升用户体验，使用Vue的transition组件配合CSS过渡。

<template>
  <v-touch @swipeleft="nextRoute" @swiperight="prevRoute">
    <transition :name="transitionName">
      <router-view/>
    </transition>
  </v-touch>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route'(to, from) {
      // 根据路由变化方向设置动画
      const toIndex = routes.indexOf(to.path)
      const fromIndex = routes.indexOf(from.path)
      this.transitionName = toIndex > fromIndex ? 'slide-left' : 'slide-right'
    }
  }
}
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease;
  position: absolute;
  width: 100%;
}

.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%);
}
</style>