vue监听页面滑动方向

最新推荐文章于 2024-09-10 11:56:39 发布

皮皮猴我们走

最新推荐文章于 2024-09-10 11:56:39 发布

阅读量322

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Rob_gao/article/details/130060651

版权

该代码示例展示了在Vue.js组件中如何监听并处理滑动事件。通过对touchstart、touchmove和touchend事件的绑定，检测用户在屏幕上的滑动方向，包括左至右、右至左、上至下和下至上四种情况。

摘要由CSDN通过智能技术生成

<template>
	<div id="app" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
		<keep-alive include="Home">
			<router-view />
		</keep-alive>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			startMoveX: 0,
			startMoveY: 0,
			moveEndX: 0,
			moveEndY: 0,
		}
	},
	methods: {
		touchStart(e) {
			// e.preventDefault();
			this.startX = e.changedTouches[0].pageX;
			this.startY = e.changedTouches[0].pageY;
		},
		touchMove(e) {
			// e.preventDefault();
			this.moveEndX = e.changedTouches[0].pageX;
			this.moveEndY = e.changedTouches[0].pageY;
			let X = this.moveEndX - this.startX;
			let Y = this.moveEndY - this.startY;
			if (Math.abs(X) > Math.abs(Y) && X > 0) {
				console.log("left 2 right");
			} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
				console.log("right 2 left");
			} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
				console.log("top 2 bottom");
			} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
				console.log("bottom 2 top");
			} else {
				console.log("just touch");
			}
		},
		touchEnd(e) {},
	}
}

</script>

<style></style>