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

mixin.ts

定义滑动距离的变量和检测触摸开始的方法,滑动方法,并导出两个方法

sendTranslateX.value > 250 && sendTranslateY.value < -100是向上滑动,满足距离后执行回调函数func,并在一秒内不再触发,一秒后清空距离并允许再次触发。

typescript 复制代码
// 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;

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

html 复制代码
<div
		class="customer"
		@touchstart="sendTouchStart"
		@touchmove="sendTouchMoveEvent($event, jumpToPage)"
	>
typescript 复制代码
import userEntityMixin from "@/mixins/pageTouches.ts";
const { sendTouchStart, sendTouchMoveEvent } = userEntityMixin.setup();
const jumpToPage = () =>{
	console.log("回调函数");
}
相关推荐
EasyNTS3 分钟前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架