javascript单页面手势滑屏切换原理详解


Posted in Javascript onMarch 21, 2016

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路。

javascript单页面手势滑屏切换原理详解

1、实现原理

假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。

<div id="viewport" class="viewport">
 <div class="pageview" style="background: #3b76c0" >
  <h3 >页面-1</h3>
 </div>
 <div class="pageview" style="background: #58c03b;">
  <h3>页面-2</h3>
 </div>
 <div class="pageview" style="background: #c03b25;">
  <h3>页面-3</h3>
 </div>
 <div class="pageview" style="background: #e0a718;">
  <h3>页面-4</h3>
 </div>
 <div class="pageview" style="background: #c03eac;">
  <h3>页面-5</h3>
 </div>
</div>

CSS样式:

.viewport{
 width: 500%;
 height: 100%;
 display: -webkit-box;
 overflow: hidden;
 pointer-events: none;
 -webkit-transform: translate3d(0,0,0);
 backface-visibility: hidden;
 position: relative;
}

注册touchstart,touchmove和touchend事件,当手指在屏幕上滑动时,使用CSS3的transform来实时设置viewport的位置,比如要显示第二个页面,就设置viewport的transform:translate3d(100%,0,0) 即可, 在这里我们使用translate3d来代替translateX,translate3d可以主动开启手机GPU加速渲染,页面滑动更流畅。

2、主要思路

从手指放在屏幕上、滑动操作、再到离开屏幕是一个完整的操作过程,对应的操作会触发如下事件:

手指放在屏幕上:ontouchstart

手指在屏幕上滑动:ontouchmove

手指离开屏幕:ontouchend

我们需要捕获触摸事件的这三个阶段来完成页面的滑动:

ontouchstart: 初始化变量, 记录手指所在的位置,记录当前时间

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

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

/*手指在屏幕上滑动,页面跟随手指移动*/
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 <=0 && translate >= maxWidth){
   //移动页面
   this.transform.call(viewport,translate);
   isMove = true;
  }
  direction = deltaX>0?"right":"left"; //判断手指滑动的方向
 }
}.bind(this),false);

ontouchend:手指离开屏幕时,计算屏幕最终停留在哪一页。首先计算手指在屏幕上的停留时间deltaT,如果deltaT<300ms,则认为是快速滑动,相反则是慢速滑动,快速滑动和慢速滑动的处理是不同的:

(1)如果是快速滑动,则让当前页面完整的停留在屏幕中央(需要计算当前页面还有多少需要滑动)

(2)如果是慢速滑动,还需要判断手指在屏幕上滑动的距离,如果滑动的距离没有超过屏幕宽度50%,则要回退到上一页,相反则要停留在当前页面

/*手指离开屏幕时,计算最终需要停留在哪一页*/
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;
   //如果最终位置超过边界位置,则停留在边界位置
   translate = translate > 0 ? 0 : translate; //左边界
   translate = 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;
    translate = translate > 0 ? 0 : translate;
    translate = translate < maxWidth ? maxWidth : translate;
   }
  }
  //执行滑动,让页面完整的显示到屏幕上
  this.transform.call(viewport,translate);
 }
}.bind(this),false);

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

//计算当前的页码
pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;

setTimeout(function(){
 //设置页码,DOM操作需要放到子线程中,否则会出现卡顿
 this.setPageNow();
}.bind(this),100);

基本的思路就这些,当然在实际操作过程中还有一些细节需要注意,这里就不详细说了,都在代码里能体现出来,源代码已传至Git:https://github.com/git-onepixel/guesture, 有兴趣的同学欢迎一起讨论。

Javascript 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
javascript实现dom元素可拖动
Mar 21 #Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 #Javascript
浅析AngularJS中的指令
Mar 20 #Javascript
简述Matlab中size()函数的用法
Mar 20 #Javascript
详解Matlab中 sort 函数用法
Mar 20 #Javascript
Sort()函数的多种用法
Mar 20 #Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
两种php实现图片上传的方法
2016/01/22 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python自定义时钟类、定时任务类
2021/02/22 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
explicit和implicit的含义
2012/11/15 面试题
应届生法律求职信
2013/10/22 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
社团活动总结范文
2014/04/26 职场文书
新闻编辑求职信
2014/07/13 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server