微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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;
        },

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐