React 移动端判断用户划屏方向

• Z时代
• 2024-01-10
• 分类：综合

功能展示：

1.当用户触发划屏事件时

2.判断其正确方向并alert出来

3.总共上下左右四种

所有代码：

import React,{Component} from 'react';
import './Stroke.css'
class Stroke extends Component{
    constructor(props){
        super(props);
        this.state={
            firstX:0,
            firstY : 0,
            endX :0,
            endY :0,
            moveX :0,
            moveY:0,
        }
    }
    NavonTouchStart=(e)=>{
        this.setState({
            firstX :e.targetTouches[0].clientX,
            firstY :e.targetTouches[0].clientY,
        })
    }
    NavonTouchMove =(e)=> {
        this.setState({
            endX: e.changedTouches[0].clientX,
            endY: e.changedTouches[0].clientY,
        });
        var moveX = this.state.endX - this.state.firstX;
        var moveY = this.state.endY - this.state.firstY;
        if(Math.abs(moveX) > 100 || Math.abs(moveY) > 100){
            if(Math.abs(moveX) > Math.abs(moveY)){
    var ele = moveX > 0 ? "向右" : "向左";
    alert(ele);
}else{
    var ele = moveY > 0 ? "向下" : "向上";
    alert(ele);
}
}
}
    render(){
        return(
            <div className="Stroke"
            onTouchStart={this.NavonTouchStart.bind(this)}
                 onTouchMove={this.NavonTouchMove.bind(this)}
            >
            </div>
        )
    }
}
export default Stroke

以上是 React 移动端判断用户划屏方向 的全部内容， 来源链接： utcz.com/z/383151.html