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; 

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

<div 		class="customer" 		@touchstart="sendTouchStart" 		@touchmove="sendTouchMoveEvent($event, jumpToPage)" 	> 

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