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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
javascript数组详解
Oct 22 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python实现定时发送邮件
2020/12/23 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
大学四年规划书范文
2013/12/27 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
企业新年寄语
2014/04/04 职场文书
遗嘱继承公证书
2014/04/09 职场文书
商场租赁意向书
2014/07/30 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年民政工作总结
2014/11/26 职场文书