当前位置：首页 > news >正文

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

news 2025/6/28 14:30:10

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;

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

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

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