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("回调函数");
}
相关推荐
我要洋人死3 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试5 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人14 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人15 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR20 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香22 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969325 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai30 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc35 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91539 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js