手指滑动屏幕原理

Posted 2020-10-14 5Clay

//手指按下屏幕的点，抬起手指的点，按下的时间，抬起的时间

var startPoint=0;  

      endPoint=0;

      startTime=0;

　  endTime=0;

//touchstart事件

$(".xx").on("touchstart",function(event){

//每次重新滑动要清除上一次手指抬起的位置和时间

endPoint=0;

endtime=0;

 startPoint=event.touches[0].clientY;

 startTime=Date.now()

})

//touchend事件

$(".xx").on("touchend",function(event){

 endPoint=event.touches[0].clientY;

 endTime=Date.now()

})

//判断滑动的速度是否超过指定值，超过就触发方法

var speed=(endPonit-startPoint)/[(endtime-starttime)/1000]

*获取的时间是毫秒，得出的速度是小数，所以要转换成秒；

*往上滑动屏幕，两点之间的差永远是负数,所以下面>20或者<-20

*如果要滑动不费力把参考值设置小一点

if(speed>20){

　　xx();//调用方法，一般是翻页

}