h5-webgl-program/src/mixins/touchHandle.js

export default {
    data(){
        return {
            startX:0,
            startY:0,
            clientX:0,
            clientY:0,
        }
    },
    methods:{
        mytouchstart(e) {
        	this.clientX = 0;
        	this.clientY = 0;
        	this.startX = e.changedTouches[0].clientX;
        	this.startY = e.changedTouches[0].clientY;
        },
        mytouchmove(e) {
        	let startX = this.startX // 开始x坐标 
        	let startY = this.startY //开始y坐标
        	let touchMoveX = e.changedTouches[0].clientx //滑动变化坐标 
        	let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
        	this.clientX = touchMoveX - startX;
        	this.clientY = touchMoveY - startY;
        },
        mytouchend(e) {
        	let startX = this.startX; // 开始x坐标
        	let startY = this.startY; //开始y坐标
        	let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标 
        	let touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标 
        	let angle = this.angle(
        	{
        		X: startX,
        		Y: startY
        	}, {
        		X: touchMoveX,
        		Y: touchMoveY
        	})
        	//滑动角度超过45retrun
        	// console.log(Math.abs(angle), "Math.abs(angle)")
        	if (Math.abs(angle) > 45){//上下滑动
        		if (touchMoveY > startY && (touchMoveY - startY)>20) { //下滑
        			console.warn("***touchend-下滑***",touchMoveY - startY);
        			this.downScroll && this.downScroll()
        		}
        		if (startY > touchMoveY && (startY - touchMoveY)>20) { //上滑
        			console.warn("***touchend-上滑***",startY - touchMoveY);
        			this.upScroll && this.upScroll()
        		}
        		
        	}else{//左右滑动
				if (startX > touchMoveX && (startX - touchMoveX)>50) { //左滑
					console.warn("***touchend-左滑***",startX - touchMoveX);
					this.leftScroll && this.leftScroll()
				}
				if(touchMoveX > startX && (touchMoveX - startX)>50){//右滑
					console.warn("***touchend-右滑***",touchMoveX - startX);
					this.rightScroll && this.rightScroll()
				}
        	}
        },
        angle(start,end){
        	let _X = end.X - start.X;
        	let _Y = end.Y - start.Y;
        	if(_X == 0) return 90;
        	return 360 * Math.atan((_Y / _X) / (2*Math.PI))
        },
    }
}