返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 15:15:05王冬梅

ontouchend:手指离开屏幕时，计算屏幕最终停留在哪一页。首先计算手指在屏幕上的停留时间deltaT,如果deltaT<300ms，则认为是快速滑动，相反则是慢速滑动，快速滑动和慢速滑动的处理是不同的：
(1)如果是快速滑动，则让当前页面完整的停留在屏幕中央(需要计算当前页面还有多少需要滑动)
(2)如果是慢速滑动，还需要判断手指在屏幕上滑动的距离，如果滑动的距离没有超过屏幕宽度50%，则要回退到上一页，相反则要停留在当前页面

XML/HTML Code复制内容到剪贴板
  1. /*手指离开屏幕时，计算最终需要停留在哪一页*/     document.addEventListener("touchend",function(e){    
  2. e.preventDefault();     var translate = 0;    
  3. //计算手指在屏幕上停留的时间     var deltaT = new Date().getTime() - startT;    
  4. if (isMove){ //发生了左右滑动     //使用动画过渡让页面滑动到最终的位置    
  5. viewport.style.webkitTransition = "0.3s ease -webkit-transform";     if(deltaT < 300){ //如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都停留到下一页    
  6. translate = direction == 'left'?     currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  7. //如果最终位置超过边界位置，则停留在边界位置     translatetranslate = translate > 0 ? 0 : translate; //左边界    
  8. translatetranslate = translate < maxWidth ? maxWidth : translate; //右边界     }else {    
  9. //如果滑动距离小于屏幕的50%，则退回到上一页     if (Math.abs(moveLength)/pageWidth < 0.5){    
  10. translate = currentPosition-moveLength;     }else{    
  11. //如果滑动距离大于屏幕的50%，则滑动到下一页     translate = direction == 'left'?    
  12. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;     translatetranslate = translate > 0 ? 0 : translate;    
  13. translatetranslate = translate < maxWidth ? maxWidth : translate;     }    
相关文章 大家在看