h5 单页面手势滑屏切换的实现原理与主要思路

现在大家都用触屏手机，H5页面的滑动换页功能就像为网页装了个”滑动杆”，不只是看内容，还可以玩儿得开心！这就是靠HTML5的触摸感应和CSS3的动画效果做到的，只要你轻轻一划，就能顺畅地翻页。

试试看这个超爽的体验！点开一个网站，轻轻一滑，页面就像有魔力似的直接翻到下一页。这种感觉酷不酷？这就是H5单页面手势滑屏切换技术的厉害之处。

实现原理大揭秘

要做出这种炫酷滑动的效果，得先准备好一个”舞台”，也就是个大盒子，就叫它viewport。这盒子得够大，才能放下所有的页面。比如咱们这儿有五页，全都铺满全屏的话，那viewport的宽度就设成500%，这样五页就能并排放了，每页占20%宽。

    

        
页面-1
    

    

        
页面-2
    

    

        
页面-3
    

    

        
页面-4
    

    

        
页面-5
    

接下来，咱们得给这个viewport加个“隐形斗篷”，就是把overflow设成hidden，这样超出viewport的部分就看不见了，每次只能看到一页。先把第一页露出来，剩下的都乖乖等着被“叫醒”哈~

CSS样式的重要性

搞定滑动效果关键靠CSS，先设置三个触摸操作：开始（touchstart）、拖动（touchmove）和结束（touchend）。分别对应触屏、移动和放开手指！

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

当你用手指触摸屏幕时，我们会记下你在哪儿摸的，什么时候摸的；当你滑动手指时，我们就立刻算出你滑多远，然后利用CSS3的transform属性去改变viewport的位置，让页面跟着你动起来；当你把手拿开时，我们会根据你滑行的速度和距离，帮你找到最合适的那一页。

触摸事件的捕获与处理

打开手机滑动的秘密就在于触碰感应的捕捉和操作！首先在“ontouchstart”中设置好一些基础数据，比如说最初的手势位置在哪儿，啥时候开始的；然后，到了“ontouchmove”，就可以算出你手指动了多远，依据这个换算结果来微调页面的位置；最后在“ontouchend”中根据你移动手势的速率和距离，决定要把页面停在哪个地方。

每次按键都像跳舞时的舞步，我们的代码就是那个精心设计舞步的大师，把每个动作都精准操控得恰到好处。

页面滑动逻辑详解

滑屏操作的关键就是要把握好时机！当我们用手指飞快地滑动屏幕时，软件会看清楚你滑动得有多快，滑得多远，然后自动帮你翻到下一页；当你慢慢划过去的时候，它就会根据你划过的距离判断你是不是想回到上一页了。

这玩意儿就像把智能大脑安在了网页上，能顺着你手指动起来的节奏做出最棒的响应。比如说，你动作快的话，网页瞬间就能翻到下一页，让你有种飞驰而过的爽感；动作放缓些，网页慢慢滑过去，让你有股轻松愉悦的惬意。

CSS3动画的魔法

要使滑动更顺畅，用translate3d代替translateX！它能靠手机GPU加速渲染，让CSS3动画画龙点睛~

这个效果就像给网页穿上了“溜冰鞋”似的，让它在手机上滑动起来更顺畅.再加上,这种效果会让你在刷屏的过程中有一种视觉上的快感，使你的浏览体验更为丰富有趣。

/*手指放在屏幕上*/
document.addEventListener("touchstart",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   startX = touch.pageX;
   startY = touch.pageY;
   initialPos = currentPosition;   //本次滑动前的初始位置
   viewport.style.webkitTransition = ""; //取消动画效果
   startT = new Date().getTime(); //记录手指按下的开始时间
   isMove = false; //是否产生滑动
}.bind(this),false);

实际操作中的细节处理

记住点小技巧，保证你的网页滑动顺畅不卡顿！得保证滑动起来顺滑流畅，不要闪来闪去的，也不能直接跳回到开头或结尾哈。

/*手指在屏幕上滑动，页面跟随手指移动*/
document.addEventListener("touchmove",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   var deltaX = touch.pageX - startX;
   var deltaY = touch.pageY - startY;
   //如果X方向上的位移大于Y方向，则认为是左右滑动
   if (Math.abs(deltaX) > Math.abs(deltaY)){
       moveLength = deltaX;
       var translate = initialPos + deltaX; //当前需要移动到的位置
       //如果translate>0 或 < maxWidth,则表示页面超出边界
       if (translate = maxWidth){
           //移动页面
           this.transform.call(viewport,translate);
           isMove = true;
       }
       direction = deltaX>0?"right":"left"; //判断手指滑动的方向
   }
}.bind(this),false);

说白了，这些小动作就是给网页加个‘防滑垫’，这样滑动的时候才不会觉得晃悠。也许你会觉得这些细节微不足道，但其实它们对整个滑动效果的顺畅度和稳定性都起着决定性作用！

动手实践，体验滑动乐趣

说那么多干？还是亲身试试！翻箱倒柜找出个能用H5的浏览器，打开个带挥手换屏幕功能的网址，然后试着在屏幕上滑动一下滑鼠，瞧着那光滑如丝的滑动过程，就知道有多过瘾了。

这就是玩儿H5时那种自己主宰的味道，跟指挥乐队似的，只要动动手，就能随心所欲地翻页。这感觉真的超棒，既刺激又舒服，让人更深刻地感受到了H5单页面手势滑屏切换技术的魔力。

总结与思考

看过这篇文章后，你应该已经搞清楚H5滑动选择是咋回事儿了？简单来说，就是做一个好看又好用的网站，让大家用得开心又舒适。

大家好，我突然想到一个问题：你们认为H5单页滑屏切换技术未来可能会怎样发展？快在评论区留言，和我们一起来讨论！当然了，觉得这篇文章有用的话，就点赞转发给你的小伙伴们，让他们也来感受下这个炫酷的网页滑动体验~

/*手指离开屏幕时，计算最终需要停留在哪一页*/
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  0 ? 0 : translate; //左边界
            translate = translate < maxWidth ? maxWidth : translate; //右边界
        }else {
            //如果滑动距离小于屏幕的50%，则退回到上一页
            if (Math.abs(moveLength)/pageWidth  0 ? 0 : translate;
                translate = translate < maxWidth ? maxWidth : translate;
            }
        }
        //执行滑动，让页面完整的显示到屏幕上
        this.transform.call(viewport,translate);
    }
}.bind(this),false);