HTML5单页面手势滑屏切换原理

XML/HTML Code复制内容到剪贴板

/*手指离开屏幕时，计算最终需要停留在哪一页*/    
document.addEventListener("touchend",function(e){    
e.preventDefault();    
var translate = 0;    
//计算手指在屏幕上停留的时间    
var deltaT = new Date().getTime() – startT;    
if (isMove){ //发生了左右滑动    
//使用动画过渡让页面滑动到最终的位置    
viewport.style.webkitTransition = "0.3s ease -webkit-transform";    
if(deltaT < 300){ //如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都停留到下一页    
translate = direction == ‘left’?    
currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
//如果最终位置超过边界位置，则停留在边界位置    
translatetranslate = translate > 0 ? 0 : translate; //左边界    
translatetranslate = translate < maxWidth ? maxWidth : translate; //右边界    
}else {    
//如果滑动距离小于屏幕的50%，则退回到上一页    
if (Math.abs(moveLength)/pageWidth < 0.5){    
translate = currentPosition-moveLength;    
}else{    
//如果滑动距离大于屏幕的50%，则滑动到下一页    
translate = direction == ‘left’?    
currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
translatetranslate = translate > 0 ? 0 : translate;    
translatetranslate = translate < maxWidth ? maxWidth : translate;    
}    
}    
//执行滑动，让页面完整的显示到屏幕上    
this.transform.call(viewport,translate);    
}    
}.bind(this),false);   

除此之外，还要计算当前页面是第几页，并设置当前页码

XML/HTML Code复制内容到剪贴板

//计算当前的页码    
pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;    
setTimeout(function(){    
//设置页码，DOM操作需要放到子线程中，否则会出现卡顿    
this.setPageNow();