• 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;
            },
  • 相关阅读:
    php长字符串
    ObjectiveC中的一些特殊的数据类型
    Android带文字的ImageButton实现
    android Error generating final archive: Debug certificate expired on xxxxxx
    iphone
    同步与异步调用http请求 iphone开发
    php输出xml格式字符串(用的这个)
    PHP数据库调用类调用实例
    VMware 8安装苹果操作系统Mac OS X 10.7 Lion正式版
    break和continue的区别
  • 原文地址:https://www.cnblogs.com/wangshishuai/p/16392694.html
Copyright © 2020-2023  润新知