天天看點

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;

    },