手势识别

<template>
	<view class="live-wrap" @touchstart="touchstart" @touchend="touchend"></view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0,
				startY: 0,
				startTime: 0,
			}
		},
		methods: {
			touchstart(e) {
				this.startTime = Date.now();
				this.startX = e.changedTouches[0].pageX;
				this.startY = e.changedTouches[0].pageY;
			},
			touchend(e) {
				if (Date.now() - this.startTime < 200) {
					return
				}

				let endX = e.changedTouches[0].pageX;
				let endY = e.changedTouches[0].pageY;

				let arrow = this.getLineAngle(this.startX, this.startY, endX, endY);

				if (arrow === 1) {
					uni.showToast({
						title: '向上滑动',
						icon: 'none'
					})
				} else if (arrow === 2) {
					uni.showToast({
						title: '向下滑动',
						icon: 'none'
					})
				} else if (arrow === 3) {
					uni.showToast({
						title: '向左滑动',
						icon: 'none'
					})
				} else if (arrow === 4) {
					uni.showToast({
						title: '向右滑动',
						icon: 'none'
					})
				}
			},
			getLineAngle(x1, y1, x2, y2) {
				var x = x1 - x2,
					y = y1 - y2;
				if (!x && !y) {
					return 0;
				}
				let arrow = 0;
				let lineAngle = 360 - ((180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360);
				if (lineAngle > 260 && lineAngle < 280 && lineAngle != 270) {
					arrow = 1;
				} else if (lineAngle > 80 && lineAngle < 100 && lineAngle != 90) {
					arrow = 2;
				} else if ((lineAngle > 0 && lineAngle < 10) || (lineAngle > 350 && lineAngle < 360)) {
					arrow = 3;
				} else if (lineAngle > 170 && lineAngle < 190 && lineAngle != 180) {
					arrow = 4;
				}
				return arrow;
			},
		}
	}
</script>