其他分享
首页 > 其他分享> > uniApp 滑动手势事件判定 支持NVUE

uniApp 滑动手势事件判定 支持NVUE

作者:互联网

<div = @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
            <div ref="test">
        //内容
            </div>
        </div>
data(){
return{
touchStartX: 0, //触摸时的原点
            touchStartY: 0, //触摸时的原点
            time: 0, // 时间记录,用于滑动时且时间小于1s则执行左右滑动
            interval: '', // 记录/清理时间记录
            touchMoveX: 0, // x轴方向移动的距离
            touchMoveY: 0, // y轴方向移动的距离
            direction: 'all',
            distance: 30,}
}
// 触摸开始事件
        touchStart(e) {
            this.touchStartX = e.changedTouches[0].pageX; // 获取触摸时的原点
            this.touchStartY = e.changedTouches[0].pageY; // 获取触摸时的原点
            // 使用js计时器记录时间
            this.interval = setInterval(() => {
                this.time++;
            }, 100);
        },
        // 触摸移动事件
        touchMove(e) {
            this.touchMoveX = e.changedTouches[0].pageX;
            this.touchMoveY = e.changedTouches[0].pageY;
        },
        // 触摸结束事件
        touchEnd(e) {
            let that = this;
            let moveX = this.touchMoveX - this.touchStartX;
            let moveY = this.touchMoveY - this.touchStartY;
            if (Math.sign(moveX) == -1) {
                moveX = moveX * -1;
            }
            if (Math.sign(moveY) == -1) {
                moveY = moveY * -1;
            }
            if (2 * moveX <= moveY) {
                // 上下
                if (this.direction != 'all' && this.direction != 'vertical') return;
                // 向上滑动
                if (this.touchMoveY - this.touchStartY <= -this.distance && this.time < 10) {
                    console.log('1_1');
                }
                // 向下滑动
                if (this.touchMoveY - this.touchStartY >= this.distance && this.time < 10) {
                    console.log('1_2');
                }
            } else if (moveX > 2 * moveY) {
                // 左右
                if (this.direction != 'all' && this.direction != 'horizontal') return;
                // 向左滑动
                if (this.touchMoveX - this.touchStartX <= -this.distance && this.time < 10) {
                    
                    }
                }
                // 向右滑动
                if (this.touchMoveX - this.touchStartX >= this.distance && this.time < 10) {
                    
                    }
                }
            }
            clearInterval(this.interval); // 清除setInterval
            this.time = 0;
        },

 

标签:uniApp,NVUE,触摸,changedTouches,moveX,moveY,time,滑动,touchMoveX
来源: https://www.cnblogs.com/wangshishuai/p/16392694.html