天天看点

uniapp 触摸滑动事件

// 触摸touch事件

    start(e){  //@touchstart 触摸开始
        this.transition = '.1s';
        this.startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标         
        this.startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
    },
    end(e){  //@touchend触摸结束
        this.moveX = 0;  //触摸事件结束恢复原状
        this.transition = '.5s';
        if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) {  //在事件结束时,判断滑动的距离是否达到出发需要执行事件的要求
            console.log('执行查看跳转事件');
            // this.touch = {};
        } else {
            console.log('滑动距离不够,不执行跳转')
            // this.touch = {};
        }
    },
    move(event) {  //@touchmove触摸移动
        let touch = event.touches[0];  //滑动过程中,手指滑动的坐标信息 返回的是Objcet对象
        this.touch = touch;
        let data = touch.clientX - this.startData.clientX;
        if(touch.clientX < this.startData.clientX) {  //向左移动
            if(data<-250) {
                data = -250;
            }
        }
        if(touch.clientX > this.startData.clientX) {  //向右移动
            if(this.moveX == 0) {
                data = 0
            } else {
                if(data>50) {
                    data = 50;
                }
            }
        }
        this.moveX = data;

    },