【uni-app】页面滑动监听

<template>
	<view class="box" @touchmove="touchMove" @touchstart="touchStart" @touchend="touchEnd"></view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 0,
				lastX: 0,
				lastY: 0
			}
		},

		methods: {
			touchMove(e) {
				if (this.flag !== 0) {
					return;
				}
				let currentX = e.touches[0].pageX;
				let currentY = e.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				let isLrOrUd = Math.abs(tx) > Math.abs(ty);
				if (isLrOrUd) {
					text = tx < 0 ? '向左滑动' : '向右滑动';
					this.flag = tx < 0 ? 1 : 2;
				} else {
					text = ty < 0 ? '向上滑动' : '向下滑动';
					this.flag = ty < 0 ? 3 : 4;
				};
				uni.showToast({
					title: text,
					icon: 'none'
				});
				this.lastX = currentX;
				this.lastY = currentY;
			},

			touchStart(e) {
				this.lastX = e.touches[0].pageX;
				this.lastY = e.touches[0].pageY;
			},

			touchEnd(e) {
				this.flag = 0;
			},
		}
	}
</script>

<style>
	page,
	.box {
		width: 100%;
		height: 100%;
	}
</style>