vue实现手机左右滑
实现手机左右滑动的 Vue 方案
使用 vue-touch 库
安装 vue-touch 库，该库基于 Hammer.js 提供了手势支持：
npm install vue-touch@next hammerjs在 Vue 项目中注册插件并配置滑动事件：
import Vue from 'vue';
import VueTouch from 'vue-touch';
import Hammer from 'hammerjs';
Vue.use(VueTouch, { name: 'v-touch', hammer: Hammer });
// 组件中使用
<template>
<v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight">
<div>滑动区域内容</div>
</v-touch>
</template>
<script>
export default {
methods: {
onSwipeLeft() {
console.log('向左滑动');
},
onSwipeRight() {
console.log('向右滑动');
}
}
};
</script>原生 Touch 事件实现
通过监听 touchstart、touchmove 和 touchend 事件计算滑动方向：
<template>
<div
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
滑动内容
</div>
</template>
<script>
export default {
data() {
return {
startX: 0,
endX: 0
};
},
methods: {
handleTouchStart(e) {
this.startX = e.touches[0].clientX;
},
handleTouchMove(e) {
this.endX = e.touches[0].clientX;
},
handleTouchEnd() {
if (this.startX - this.endX > 50) {
console.log('向左滑动');
} else if (this.endX - this.startX > 50) {
console.log('向右滑动');
}
}
}
};
</script>结合 CSS 过渡效果
为滑动添加动画效果，提升用户体验：
.slide-container {
transition: transform 0.3s ease;
}
.slide-left {
transform: translateX(-100%);
}
.slide-right {
transform: translateX(100%);
}在 Vue 中动态切换类名：
<template>
<div
:class="['slide-container', directionClass]"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
内容
</div>
</template>
<script>
export default {
data() {
return {
directionClass: '',
startX: 0
};
},
methods: {
handleTouchEnd() {
if (this.startX - this.endX > 50) {
this.directionClass = 'slide-left';
} else if (this.endX - this.startX > 50) {
this.directionClass = 'slide-right';
}
setTimeout(() => this.directionClass = '', 300);
}
}
};
</script>注意事项
- 移动端开发需添加视口 meta 标签确保正确缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 滑动阈值（如 50px）可根据实际需求调整
- 在
touchmove事件中调用e.preventDefault()可防止页面滚动与滑动冲突 - 对于复杂场景（如轮播图），推荐使用现成库如
swiper.js
