美文网首页
react 触摸事件,滑动事件 ontouch

react 触摸事件,滑动事件 ontouch

作者: 写代码的杰西 | 来源:发表于2020-07-29 11:45 被阅读0次

div上加上

onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}>

处理事件如下,方法比较简单不做过多描述

/*手接触屏幕*/
    handleTouchStart = (e) => {
        this.startY = e.touches[0].clientY;
    };
    /*手在屏幕上移动*/
    handleTouchMove = (e) => {
        this.endY = e.touches[0].clientY;
    };
    /*手离开屏幕*/
    handleTouchEnd = (e) => {
        // 获取滑动范围
        if(this.startY>-1 && this.endY>-1){
            let distance = Math.abs(this.startY - this.endY);
            if (distance > 50) {
                if (this.startY > this.endY) {
                    let {showIndex} = this.state
                    showIndex ++
                    this.setState({showIndex})
                } else {
                    let {showIndex} = this.state
                    showIndex --
                    this.setState({showIndex})
                }
            }
        }
        
        this.startY=-1
        this.endY=-1
    };

相关文章

网友评论

      本文标题:react 触摸事件,滑动事件 ontouch

      本文链接:https://www.haomeiwen.com/subject/yvdhrktx.html