vue3移动端监听手势滑动
虑,我们就知道大概怎么写了。1.在Mounted里计算获取手指坐标。2.计算手势触摸到释放的角度。2.计算手势触摸到释放的角度。3.计算手势滑动的距离。3.计算手势滑动的距离。
·
思路
1.利用document.getElementById(‘id’).addEventListeneraddEventListener监听获取手指接触屏幕开始到结束后的坐标
2.计算手势触摸到释放的角度
3.计算手势滑动的距离
综合这几点考虑,我们就知道大概怎么写了
首先创建一个div,id为touchBox
<template>
<div id="touchBox">
</div>
</template>
1.在Mounted里计算获取手指坐标
onMounted(() => {
//手指接触屏幕
document.getElementById('touchBox').addEventListener(
'touchstart',
function (e) {
state.startx = `${e.touches[0].pageX}`;
state.starty = `${e.touches[0].pageY}`;
console.log(state.startx, state.starty)
e.stopPropagation();
},
false
);
document.getElementById('touchBox').addEventListener(
'touchend',
function (e) {
let endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
let direction = getDirection(state.startx, state.starty, endx, endy);
e.stopPropagation();
console.log('direction', direction)
},
false
);
});
2.计算手势触摸到释放的角度
//获得角度
const getAngle = (angx, angy) => {
return (Math.atan2(angy, angx) * 180) / Math.PI;
};
let angle = getAngle(angx, angy);
3.计算手势滑动的距离
const getDirection = (startx, starty, endx, endy) => {
let angx = endx - startx;
let angy = endy - starty;
let result = 0;
//如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
console.log('==>点击了一下');
return result;
}
let angle = getAngle(angx, angy);
/ console.log('角度', angle);
console.log('角度', num);
if (angle < 0 && -90 < angle) {
console.log('往【右上】滑动1', num);
} else if (angle < -90 && -180 < angle) {
console.log('往【左上】滑动2', num);
} else if (angle < 90 && 0 < angle) {
console.log('往【右下】滑动0', num);
} else {
console.log('往【左下】滑动0', num);
}
return result;
};
这样就可以了,如果大家还有更好的实现思路,也可以在评论区留言
更多推荐
已为社区贡献1条内容
所有评论(0)