React版移动端滑动

className="report-detail"
onTouchStart={handleTouchStartDetail}
onTouchMove={handleTouchMoveDetail}
onTouchEnd={handleTouchEndDetail}
>

const handleTouchStartDetail = (e) => {
setStartx(e.touches[0].pageX);
setStarty(e.touches[0].pageY);
};
const handleTouchMoveDetail = (e) => {
// setIsShowDetail(true);
};
const showData = () => {
console.log(999999999, '终于向上了');
setIsShowDetail(true);
};
const handleTouchEndDetail = (e) => {
let endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
let direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
console.log("未滑动！");
break;
case 1:
console.log("向上！");
break;
case 2:
console.log("向下！");
showData();
break;
case 3:
console.log("向左！");
break;
case 4:
console.log("向右！");
break;
default:
}
};
//根据接触和离开判断方向 1向上 2向下 3向左 4向右 0未发生滑动（[Math.abs][4]）
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) {
        return result;
    }
    let angle = getAngle(angx, angy);
    if (angle >= -135 && angle <= -45) {
        result = 1;
    } else if (angle > 45 && angle < 135) {
        result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    } else if (angle >= -45 && angle <= 45) {
        result = 4;
    }

    return result;
}
//触摸点和离开点连线与[x轴角度][3]
const getAngle = (angx,angy) => {
    return Math.atan2(angy, angx) * 180 / Math.PI;
};