React 移動端判斷使用者劃屏方向

功能展示：

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複製程式碼