监听页面左右/上下滑动事件

监听页面左右/上下滑动事件

<template>
	<view @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="touch">
		上下/左右 滑动
	</view>
</template>
<script>
	export default {
		data() {
			return {		
				/* 移动所需参数 */
				startX: 0,
				startY: 0,
				endX: 0,
				endY: 0,
				isStatus: false,
			}
		},
		methods: {
			/* 监听滑动开始 */
			touchstart(e) {
				e.preventDefault();
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;
			},
			/* 监听滑动移动 */
			touchmove(e) {
				this.isStatus= true;
				this.endX = e.touches[0].pageX;
				this.endY = e.touches[0].pageY;
			},
			/* 监听滑动结束 */
			touchend(e) {
				/* 判断移动方向 */
				let X = this.endX - this.startX,
					Y = this.endY - this.startY;
				/* 判断是否移动还是点击 */
				if (this.isStatus) {
					if (X > 0 && Math.abs(X) > Math.abs(Y)) {
						//向右
					} else if (X < 0 && Math.abs(X) > Math.abs(Y)) {
						//向左
					} else if (Y > 0 && Math.abs(Y) > Math.abs(X)) {
						//向下
					} else if (Y < 0 && Math.abs(Y) > Math.abs(X)) {
						//向上
					} else {
					}
				} else {
				}
			},
		}
	}
</script>
 
<style scoped lang="less">
	.touch {
		width: 100vw;
	   height: 100vh;
	}
</style>