Vue.js在移动端开发中，实现上下滑动页面切换可通过监听触摸事件完成，核心逻辑为：监听touchstart记录起始坐标，touchmove时计算滑动方向与距离，当滑动距离超过阈值且方向为垂直时，触发touchend事件切换页面，结合Vue的动态组件或路由，配合CSS transition实现平滑过渡动画，如transform: translateY()控制页面位移，同时需阻止默认滚动行为，优化滑动灵敏度与回弹效果，最终实现类似原生APP的流畅页面切换体验，提升用户交互自然度。
Vue.js 移动端上下滑动页面切换实现指南
在移动端应用开发中,上下滑动切换页面的交互方式因其符合用户直觉、操作流畅，被广泛用于模仿原生 App 的体验，基于 Vue.js 实现这一功能，核心在于精准监听移动端触摸事件、计算滑动距离与方向，并结合动态样式控制页面切换动画，本文将系统阐述实现思路、关键代码细节及性能优化技巧，助您快速构建流畅、自然的移动端滑动切换效果。
实现思路与核心需求
核心需求
- 上下滑动切换：用户上下滑动屏幕时，页面需实时跟随手指移动；释放后根据滑动距离与速度判断是否切换至相邻页面。
- 平滑动画过渡：页面切换需配备流畅的过渡动画（如弹性效果），避免突兀跳转，显著提升用户体验。
- 边界智能控制：首页禁止向上滑动，末页禁止向下滑动，防止无效操作，增强交互逻辑的严谨性。
- 全屏适配性：自动适配不同屏幕尺寸，确保页面始终全屏显示且滑动区域精准覆盖视口。
技术要点
- 触摸事件捕获：通过 `touchstart`（开始）、`touchmove`（移动）、`touchend`（结束）事件链完整追踪用户滑动行为。
- 动态样式控制：利用 Vue 的响应式数据绑定，结合 CSS `transform: translateY()` 实现页面位移的精准控制。
- 组件化架构：将每个页面拆分为独立组件，通过父组件管理当前页面索引 (`currentIndex`)，实现逻辑解耦。
- 滑动阈值与速度计算：结合滑动距离与速度判断切换意图，优化交互灵敏度。
具体实现步骤
项目结构搭建
假设已通过 Vue CLI 或 Vite 初始化项目，推荐采用以下结构：
src/
├── components/
│ ├── Page1.vue // 页面组件1
│ ├── Page2.vue // 页面组件2
│ └── Page3.vue // 页面组件3
├── App.vue // 根组件（滑动容器）
└── main.js根组件实现（App.vue）
根组件作为滑动容器,负责管理页面索引、监听触摸事件，并动态渲染当前页面。
模板结构
<template>
<div
class="swipe-container"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@touchcancel="handleTouchCancel"
>
<!-- 页面列表，每个页面绝对定位，通过 transform 控制垂直位置 -->
<div
v-for="(page, index) in pages"
:key="index"
class="page"
:style="{
transform: `translateY(${(index - currentIndex) * 100}vh)`,
transition: isSwiping ? 'none' : 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
}"
>
<component :is="page.component" />
</div>
</div>
</template>
脚本逻辑
<script>
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'
import Page3 from './components/Page3.vue'
<p>export default {
name: 'App',
components: {
Page1,
Page2,
Page3
},
data() {
return {
pages: [
{ component: 'Page1' },
{ component: 'Page2' },
{ component: 'Page3' }
],
currentIndex: 0, // 当前页面索引
touchStartY: 0, // 滑动起始 Y 坐标
touchEndY: 0, // 滑动结束 Y 坐标
isSwiping: false, // 是否正在滑动中
minSwipeDistance: 50, // 最小滑动距离阈值（px）
velocityThreshold: 0.5 // 最小切换速度阈值（px/ms）
}
},
methods: {
// 触摸开始：记录起始位置，禁用默认滚动行为
handleTouchStart(e) {
this.touchStartY = e.touches[0].clientY
this.touchEndY = this.touchStartY
this.isSwiping = true
e.preventDefault() // 防止页面整体滚动
},</p>
<pre><code>// 触摸移动：计算位移，实时更新页面位置
handleTouchMove(e) {
if (!this.isSwiping) return
this.touchEndY = e.touches[0].clientY
const deltaY = this.touchEndY - this.touchStartY
const maxDeltaY = (this.pages.length - 1 - this.currentIndex) * window.innerHeight
const minDeltaY = -this.currentIndex * window.innerHeight
// 限制滑动范围，防止超出边界
const clampedDeltaY = Math.max(minDeltaY, Math.min(maxDeltaY, deltaY))
const offsetPercent = clampedDeltaY / window.innerHeight * 100 // 转换为 vh 单位
// 仅更新当前页面的位移（避免性能问题）
const currentPage = this.$el.querySelector(`.page:nth-child(${this.currentIndex + 1})`)
if (currentPage) {
currentPage.style.transform = `translateY(${offsetPercent}vh)`
}
},
// 触摸结束：判断是否切换页面
handleTouchEnd() {
if (!this.isSwiping) return
this.isSwiping = false
const deltaY = this.touchEndY - this.touchStartY
const threshold = window.innerHeight * 0.25 // 触发切换的视口高度比例
// 计算滑动速度（px/ms）
const deltaTime = Date.now() - (this.startTime || Date.now())
const velocity = Math.abs(deltaY) / (deltaTime || 1)
