React版移动端滑动

Posted 2023-03-23

参考技术A <div
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;