移动端左右滑动事件记录

监测滑动，主要用到了三个事件

touchStart:手指按下时触发该事件
touchMove:手指移动时触发该事件 （持续触发）
touchEnd:手指松开时触发该事件

这里用的是vue的写法

data(){
	return{
		startX:0,//开始触摸的位置
		endX:0,//结束触摸的位置
		disX:0,//移动距离
		moveFlag:0,//是否在滑动
	}
}
methods:{
	touchStart(event){
		if(event.targetTouches.length==1){  //只有一跟手指滑动
			this.startX = event.targetTouches[0].clientX   //记录开始滑动的位置(clientX是触碰点到浏览器左边的距离)
		}
	},
	touchMove(event){
		if(event.targetTouches.length==1){    //如果只有一根手指滑动
              this.endX = event.targetTouches[0].clientX   //不断记录滑动后的位置
              this.moveFlag=1;    //表示在滑动而不是点击
         }
	},
	touchEnd(event){
		this.disX = this.startX - this.endX   //计算滑动的距离
		if(this.disX>10 && this.moveFlag==1){   //左滑
            //你的逻辑代码
            this.moveFlag=0;
        }else if(this.disX<-10 && this.moveFlag==1){  //右滑
             //你的逻辑代码
             this.moveFlag=0;

        }
	}
	
}

这里有几个问题：

1.为什么不在touchEnd事件里直接获取手指抬起时的坐标
答:因为touchEnd事件里的event无法获取clientX，所以只有在touchMove事件中不断记录
2.为什么要有moveFlag状态
答:因为你点击的时候也会触发touchStart和touchEnd事件，所以为了避免点击事件误判为滑动事件，在touchMove时触发滑动的状态。滑动结束后再把状态还原。