• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。
    1、实现原理
    假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。

    XML/HTML Code复制内容到剪贴板
    1. <div id="viewport" class="viewport">    
    2. <div class="pageview" style="background: #3b76c0" >    
    3. <h3 >页面-1</h3>    
    4. </div>    
    5. <div class="pageview" style="background: #58c03b;">    
    6. <h3>页面-2</h3>    
    7. </div>    
    8. <div class="pageview" style="background: #c03b25;">    
    9. <h3>页面-3</h3>    
    10. </div>    
    11. <div class="pageview" style="background: #e0a718;">    
    12. <h3>页面-4</h3>    
    13. </div>    
    14. <div class="pageview" style="background: #c03eac;">    
    15. <h3>页面-5</h3>    
    16. </div>    
    17. </div>   

    CSS样式：

    XML/HTML Code复制内容到剪贴板
    1. .viewport{    
    2. width: 500%;    
    3. height: 100%;    
    4. display: -webkit-box;    
    5. overflow: hidden;    
    6. pointer-events: none;    
    7. -webkit-transform: translate3d(0,0,0);    
    8. backface-visibility: hidden;    
    9. position: relative;    
    10. }  

    注册touchstart,touchmove和touchend事件，当手指在屏幕上滑动时,使用CSS3的transform来实时设置viewport的位置，比如要显示第二个页面，就设置viewport的transform:translate3d(100%,0,0) 即可， 在这里我们使用translate3d来代替translateX，translate3d可以主动开启手机GPU加速渲染，页面滑动更流畅。
    2、主要思路
    从手指放在屏幕上、滑动操作、再到离开屏幕是一个完整的操作过程，对应的操作会触发如下事件：
    手指放在屏幕上：ontouchstart
    手指在屏幕上滑动：ontouchmove
    手指离开屏幕：ontouchend
    我们需要捕获触摸事件的这三个阶段来完成页面的滑动：
    ontouchstart: 初始化变量, 记录手指所在的位置,记录当前时间

    XML/HTML Code复制内容到剪贴板
    1. /*手指放在屏幕上*/    
    2. document.addEventListener("touchstart",function(e){    
    3. e.preventDefault();    
    4. var touch = e.touches[0];    
    5. startX = touch.pageX;    
    6. startY = touch.pageY;    
    7. initialPos = currentPosition; //本次滑动前的初始位置    
    8. viewport.style.webkitTransition = ""; //取消动画效果    
    9. startT = new Date().getTime(); //记录手指按下的开始时间    
    10. isMove = false; //是否产生滑动    
    11. }.bind(this),false);   

    ontouchmove: 获得当前所在位置，计算手指在屏幕上的移动差量deltaX,然后使页面跟随移动

    XML/HTML Code复制内容到剪贴板
    1. /*手指在屏幕上滑动，页面跟随手指移动*/    
    2. document.addEventListener("touchmove",function(e){    
    3. e.preventDefault();    
    4. var touch = e.touches[0];    
    5. var deltaX = touch.pageX - startX;    
    6. var deltaY = touch.pageY - startY;    
    7. //如果X方向上的位移大于Y方向，则认为是左右滑动    
    8. if (Math.abs(deltaX) > Math.abs(deltaY)){    
    9. moveLength = deltaX;    
    10. var translate = initialPos + deltaX; //当前需要移动到的位置    
    11. //如果translate>0 或 < maxWidth,则表示页面超出边界    
    12. if (translate <=0 && translate >= maxWidth){    
    13. //移动页面    
    14. this.transform.call(viewport,translate);    
    15. isMove = true;    
    16. }    
    17. direction = deltaX>0?"right":"left"; //判断手指滑动的方向    
    18. }    
    19. }.bind(this),false);   


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

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

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

    XML/HTML Code复制内容到剪贴板
    1. //计算当前的页码    
    2. pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;    
    3. setTimeout(function(){    
    4. //设置页码，DOM操作需要放到子线程中，否则会出现卡顿    
    5. this.setPageNow();    
    6. }.bind(this),100);   

    基本的思路就这些，当然在实际操作过程中还有一些细节需要注意，这里就不详细说了，都在代码里能体现出来。关于HTML5单页面手势滑屏切换原理 小编就给大家介绍这么多，希望对大家有所帮助！

    上一篇：详解HTML5 Canvas绘制不规则图形时的非零环绕原则
    下一篇：使用HTML5 Canvas API绘制弧线的教程
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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