react滑动与鼠标事件

import React, {Component} from 'react';

import Home from "./view/home/home";
import Ability from "./view/ability/ability";
import Case from "./view/case/case";
import AboutUs from "./view/about-us/about-us";
import Contact from "./view/contact/contact.js"
import "./common/css/style.css";

export default class App extends Component {
    // 移动效果处理
    state = {
        moveVioew: {
            transform: 'translate(0,0)'
        },
        appNameColor: 'whiteName',
        pageNum: 0,
    };
    // 滑动方向
    deriction= true;
    // 页码
    pageNum = 0;
    // 手势滑动最小距离
    MIN_TOUCH_DISTENCE = 50
    constructor(props) {
        super(props);
        this.state = {
            moveVioew: {
                transform: 'translate(0,0)'
            },
            appNameColor: 'whiteName',
            pageNum: 0
        }
    };

    arrowClick = () => {
        this.pageNum = this.state.pageNum + 1;
        this.setState({
            moveVioew: {
                transform: 'translate(-' + 100 * this.pageNum + 'vw,0)',
                animation: 'show0' + this.pageNum + ' 1s'
            },
            appNameColor: this.pageNum > 1 ? 'blackName' : 'whiteName',
            pageNum: this.pageNum
        });
    };
    /**
     * 鼠标滚轮事件
     * @param e
     */
    handleScroll = (e) => {
        // 判断滚动方向
        const delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        this.swiperPage(delta>0);
    };

    /**
     * 左右滑动切换页面
     */
    componentDidMount() {
        //监听火狐鼠标滚动事件
        document.addEventListener("DOMMouseScroll", this.handleScroll, false);

        //监听谷歌苹果浏览器滚动事件
        document.addEventListener("mousewheel", this.handleScroll, false);
    }

    /*手接触屏幕*/
    handleTouchStart = (e) => {
        this.startX = e.touches[0].clientX;
    };
    /*手在屏幕上移动*/
    handleTouchMove = (e) => {
        this.endX = e.touches[0].clientX;
    };
    /*手离开屏幕*/
    handleTouchEnd = (e) => {
        // 获取滑动范围
        let distance = Math.abs(this.startX - this.endX);
        if (distance > this.MIN_TOUCH_DISTENCE) {
            this.swiperPage(this.startX <this.endX);
            if (this.startX > this.endX) {
                console.log('向左滑动');
            } else {
                console.log('向右滑动');
            }
        }
    };
    /**
     * d点击回到首页
     */
    toIndex=()=>{
        this.pageNum=0;
        this.setState({
            moveVioew: {
                transform: 'translate(0,0)',
                animation: 'show 1s'
            },
            appNameColor:  'whiteName',
            pageNum: this.pageNum,
            deriction: false
        })
    };

    /**
     * 页面切换
     */
    swiperPage=(status)=>{
        if (status) {
            this.deriction = false;
            this.pageNum > 0 ? this.pageNum-- : this.pageNum = 0;
        } else {
            this.deriction = true;
            this.pageNum < 5 ? this.pageNum++ : this.pageNum = 5;
        }
        let showNum = 'show01';
        let translateX = '';
        let translateY = '';
        showNum = (this.deriction ? 'show0' + this.pageNum : 'show' + (this.pageNum + 1));
        translateX = ((this.pageNum > 3 ? 300 : 100 * this.pageNum) + (this.pageNum > 0 ? 'vw' : ''));
        translateY = (this.pageNum > 3 ? 100 * (this.pageNum - 3) + 'vh' : '0');

        this.setState({
            moveVioew: {
                transform: 'translate(-' + translateX + ',-' + translateY + ')',
                animation: showNum + ' 1s'
            },
            appNameColor: this.pageNum > 1 ? 'blackName' : 'whiteName',
            pageNum: this.pageNum,
            deriction: this.deriction
        });
    };
    render() {
        return <div className="vwh"
                    onTouchStart={this.handleTouchStart}
                    onTouchMove={this.handleTouchMove}
                    onTouchEnd={this.handleTouchEnd}
        >
            <div className={'app-name ' + this.state.appNameColor} onClick={this.toIndex}>
                MEIZHUBA
            </div>
            <div className="showDom flex justify-end" style={this.state.moveVioew}>
                <Home arrowClick={this.arrowClick}/>
                <Ability movex={this.state.pageNum} deriction={this.state.deriction}/>
                <Case movex={this.state.pageNum} arrowClick={this.arrowClick} deriction={this.state.deriction}/>
                <AboutUs movex={this.state.pageNum} deriction={this.state.deriction}/>
                <Contact movex={this.state.pageNum} deriction={this.state.deriction}/>
            </div>
        </div>
    }
}