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("回调函数");
}