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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
短波问题解答
2021/02/28 无线电
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
超清晰的document对象详解
2007/02/27 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python os模块学习笔记
2015/06/21 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python匿名函数及应用示例
2019/04/09 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python列表推导式实现代码实例
2020/09/09 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
初三物理教学反思
2014/01/21 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技