HTML5 单页面手势滑屏切换实战教程：原理、实现与注意事项

今天咱就来说说html5的滑动换页是咋回事儿。其实，这玩意儿特别简单，基本上就是运用html5的触碰效果和css3的动画技术，把网页弄得跟手机应用似的。然后，你只需要用手这么一划就可以轻松地换页！下面我就来详细给你说说怎么搞这个，再分享几个秘诀给你~

实现原理：手把手教你搭建基础框架

首先，假设我们有五张连屏幕都装不下的网页。那么，就需要准备一个宽度为500%的DIV”viewport”（一个可以放进去所有页面的大框）。接着，将这个框子的起点设为0，这样就算页面超出框子范围也不怕。最后，完工！

咱们得给这个容器加点漂亮的CSS风格，顺便再配上个registrotouchstart、touchmove和touchend那些高大上的玩意儿。滑动屏幕的时候，依靠CSS3的transform调整viewport位置，比如想翻到下一页，就是transform:translate3d(100%,0,0)。记住，translate3d不光只有translateX那么简单，它还可以提高手机GPU的渲染速度，使滑屏更加顺畅！

主要思路：捕捉触摸事件，完成页面滑动

    

        
页面-1
    
    

        
页面-2
    
    

        
页面-3
    
    

        
页面-4
    
    

        
页面-5
    

手机轻轻一滑就能完成！手一松开，啥意外都有可能来！

手指放在屏幕上：ontouchstart

手指在屏幕上滑动：ontouchmove

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

手指离开屏幕：ontouchend

搞定页面滑动就得懂这三招。首先，点了那一刻起就要设好初始状态，告诉系统你按哪儿啥时按的哈。然后，手指移动时，别忘了看下现在身处哪里算个deltaX知道走过屏幕多远，这样网页就能顺势过渡。最后，把握好结束的那一刹那，看看手指划过的区域，该翻新还是后退全凭这个确定。

注意事项：让你的滑动更流畅

做好HTML5单页手势滑屏前，记得几点哦：1.速度得快点，别拖后腿影响滑动效果；2.CSS3动画要小心点，别拉低了网页速度；3.别忽略兼容性问题，新旧手机、电脑上各浏览器都要好好跑才行！

实战案例：手把手教你实现滑动切换

来点儿实在的学习！先建个HTML文件呗，别忘了加viewport和五个页面！然后就给viewport加上CSS，设好宽度和overflow！再让我们给touch事件注册三个函数：touchstart（开始触碰），touchmove（滑动的时候），还有touchend（触碰到啦）。这几个函数加上去就能搞定页面滑动！搞定之后，赶紧试一试，看看咱这个滑动能不能行

优化建议：提升用户体验

搞定HTML5单页滑动手势后，咱们还可加点料，使其更顺溜方便。比如说渐变动画，看起来就舒心多了；加入点手势变化，比如两指捏缩就可放大缩小，轻按一下也行，这样玩得才过瘾呢；最后别忘了添个进度提示，让你知道现在网页加载到什么地方了，向哪个方向滑动，这样心里才有数不是？

常见问题：解决滑动切换中的疑难杂症

做HTML5滑屏换页时，是不是常遇到卡顿或不准确移动的情况？别担心，其实解决方法挺多的哟~比如说调整一下代码，精炼一下CSS格式什么的就行了呗。多试试看，改善改进，你的滑屏换页也能炒鸡顺畅！

/*手指放在屏幕上*/
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);

总结：HTML5单页面手势滑屏切换，就是这么简单！

搞定这些实用的知识后，你就会知道如何使用HTML5和CSS3做出手机式的页面滑动效果了！简单来说，就是通过触摸事件和动感十足的CSS3动画技术，让你的网页滑动起来更像手机应用程序。不过别忘了，在操作过程中，有些小窍门和常见问题需要注意。只要多加练习和改进，你的网页滑动体验肯定会越来越好哒！

说说看你在用HTML5做单页滑动翻页时有遇到过啥问题或者有什么不错的创意吗？快来一起交流一下！别忘了喜欢就给点赞，还可以分享给你的小伙伴们！

/*手指在屏幕上滑动，页面跟随手指移动*/
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);