当前位置：首页 > VUE

vue实现页面滑动路由

2026-02-24 04:20:34VUE

实现滑动路由的基本思路

在Vue中实现页面滑动路由切换效果，通常结合Vue Router和手势检测库（如hammer.js）或原生touch事件。核心原理是通过监听触摸事件，判断滑动方向后调用路由跳转方法。

安装必要依赖

确保项目中已安装Vue Router。如需手势检测支持，可安装hammer.js：

vue实现页面滑动路由

npm install vue-router hammerjs

基础实现方案

方案一：使用原生Touch事件

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      touchStartX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.touchStartX = e.changedTouches[0].screenX
    },
    handleTouchEnd(e) {
      const touchEndX = e.changedTouches[0].screenX
      const diffX = touchEndX - this.touchStartX

      // 右滑且滑动距离超过阈值
      if (diffX > 50) {
        this.$router.go(-1) // 返回上一页
      } 
      // 左滑且滑动距离超过阈值
      else if (diffX < -50) {
        this.$router.push('/next-page') // 前往下一页
      }
    }
  }
}
</script>

方案二：使用Hammer.js

<template>
  <div ref="swipeContainer">
    <router-view />
  </div>
</template>

<script>
import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$refs.swipeContainer)
    hammer.on('swipeleft', () => {
      this.$router.push('/next-page')
    })
    hammer.on('swiperight', () => {
      this.$router.go(-1)
    })
  }
}
</script>

进阶优化方案

添加过渡动画

<template>
  <div>
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route'(to, from) {
      // 根据路由跳转方向设置动画
      const toDepth = to.meta.index || 0
      const fromDepth = from.meta.index || 0
      this.transitionName = toDepth > fromDepth 
        ? '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;
}

.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>

配置路由元信息

// router.js
const routes = [
  {
    path: '/page1',
    component: Page1,
    meta: { index: 1 }
  },
  {
    path: '/page2',
    component: Page2,
    meta: { index: 2 }
  }
]