vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用_vue获取滑动间距

mixin.ts
定义滑动距离的变量和检测触摸开始的方法，滑动方法，并导出两个方法
sendTranslateX.value > 250 && sendTranslateY.value < -100是向上滑动，满足距离后执行回调函数func，并在一秒内不再触发，一秒后清空距离并允许再次触发。

// touch----mixins
import { ref } from "vue";
import { useRouter } from "vue-router";
const userEntityMixin = {
	setup() {
		const router = useRouter();
		let sendTranslateX = ref(0);
		let sendTranslateY = ref(0);
		let sendoriginX = 0;
		let sendoriginY = 0;

		const sendTouchStart = event => {
			sendoriginX = event.touches[0].screenX;
			sendoriginY = event.touches[0].screenY;
		};
		let jumpOnce = false;
		const sendTouchMoveEvent = (e, func) => {
			if (sendTranslateX.value > 250 && sendTranslateY.value < -100) {
				if (jumpOnce) {
					setTimeout(() => {
						jumpOnce = false;
						sendTranslateX.value = 0;
						sendTranslateY.value = 0;
					}, 1000);
					return;
				}
				// jumpToPage();
				func && func();
				jumpOnce = true;
				return;
			}

			let afterX = 0;
			let afterY = 0;

			afterX = e.changedTouches[0].screenX;
			afterY = e.changedTouches[0].screenY;
			sendTranslateX.value = afterX - sendoriginX;
			sendTranslateY.value = afterY - sendoriginY;
		};
		return {
			sendTouchStart,
			sendTouchMoveEvent
		};
	}
};
export default userEntityMixin;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

使用混入的检测滑动，增加最外层标签的监听

<div
		class="customer"
		@touchstart="sendTouchStart"
		@touchmove="sendTouchMoveEvent($event, jumpToPage)"
	>
1
2
3
4
5

import userEntityMixin from "@/mixins/pageTouches.ts";
const { sendTouchStart, sendTouchMoveEvent } = userEntityMixin.setup();
const jumpToPage = () =>{
	console.log("回调函数");
}
1
2
3
4
5