vue h5手势滑动切换页面,切换滑屏方式
H5单页手势滑屏切换通过HTML5触摸事件和CSS3动画(Transform，Transition)实现。效果图如下所示。本文简要介绍了它的实现原理和主要思想。
1、实现原理
假设有五个页面，每个页面占屏幕宽度的100%，那么创建一个DIV容器视口，将其宽度设置为500%，然后将这五个页面加载到容器中，让这五个页面平分整个容器。最后，设置容器的默认位置为0和0，溢出为隐藏，这样屏幕默认显示第一页。
div= viewport class= viewport div class= pageview style= background:# 3b 76 c 0 H3 page-1/H3/div div div class= pageview style= background:# 58 c 03 b；H3 page-2/H3/div div class= pageview style= background:# c03b 25；H3 page-3/H3/div div class= pageview style= background:# e0a 718；H3第4页/H3/div div class= pageview style= background:# c 03 EAC；H3第5页/h3 /div/divCSS样式：视口{宽度：500%；身高：100%；显示：-WebKit-box；溢出：隐藏；//指针-事件：无；//这句话会使整个页面的click事件失效。如果需要绑定click事件，请注意out-WebKit-transform:translate 3d(0，0，0)；背面-可见性：隐藏；位置：相对；}注册touchstart、touchmove和touchend事件。当手指在屏幕上滑动时，使用CSS3的transform实时设置视口的位置。例如，要显示第二页，只需设置transform:translate3d(100%，0，viewport。这里我们用translate3d代替translateX，可以主动开启手机的GPU加速渲染，让页面滑动更加流畅。
2、主要思路
从手指放在屏幕上，滑动，到离开屏幕，是一个完整的操作过程。相应的操作将触发以下事件：
把你的手指放在屏幕上：触摸开始
在屏幕上滑动手指：触摸移动
手指离开屏幕：触摸
我们需要捕捉触摸事件的这三个阶段来完成页面的滑动：
Ontouchstart:初始化变量，记录手指的位置并记录当前时间。
/*将手指放在屏幕上*/document . addevent listener( touch start ，function(e){ e . prevent default())；var touch=e . touches[0]；startX=touch.pageXstartY=touch.pageYinitialPos=currentPosition//此幻灯片之前的初始位置viewport . style . webkittransition=“”；//取消动画效果startT=new Date()。getTime()；//记录手指按压的开始时间isMove=false//是否产生滑移}。bind(this)，false)；Ontouchmove:获取当前位置，计算手指在屏幕上移动的差值deltaX，然后让页面跟随移动。
/*手指在屏幕上滑动，页面随手指移动*/document . addevent listener( touch move ，function(e){ e . prevent default())；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//当前要移动到的位置//如果translate0或maxWidth，则表示页面越界If(translate=0 translate=maxWidth){//移动页面this.transform.call (viewport，translate)；isMove=true}方向=deltaX0？“右”:“左”；//判断手指滑动的方向}}。bind(this)，false)；Ontouchend:当你的手指离开屏幕时，计算屏幕会停留在哪一页。首先，计算手指在屏幕上的停留时间t。如果300ms为300 ms，则认为是快速滑动，反之则认为是慢速滑动。快速滑动和慢速滑动的处理是不同的：
如果是快速滑动，让当前页面完全停留在屏幕中央(需要计算当前页面需要滑动多少)。
如果是慢速滑动，还需要判断手指在屏幕上滑动的距离。如果滑动距离没有超过屏幕宽度的50%，就需要回到上一页，否则就需要停留在当前页面。
/*当手指离开屏幕时，计算最终需要停留在哪个页面*/document . addevent listener( Touched ，function(e){ e . prevent default())；var translate=0；//计算手指停留在屏幕上的时间var deltat=newdate()。GetTime()-startt；If (isMove){ //左右滑动//使用动画过渡使页面滑动到最终位置viewport . style . WebKit transition= 0.3s ease-WebKit-transform ；If(deltaT 300){ //如果停留时间小于300ms，则认为是快速滑行。不管滑动的距离是多少，它都停留在下一页translate=direction==left ？current position-(page width moveLength):current position page width-moveLength；//如果最终位置超过边界位置，停留在边界位置translate=translate 0？0:翻译；//左边界translate=translate maxWidth？maxWidth:translate；//右边界}else {//如果滑动距离小于屏幕的50%，返回上一页If(math . ABS(movelength)/page width 0.5){ translate=当前位置-movelength；}else{ //如果滑动距离大于屏幕的50%，滑动到下一页translate=direction==left ？current position-(page width moveLength):current position page width-moveLength；translate=翻译0？0:翻译；translate=translate maxWidth？maxWidth:translate；} }//进行滑动，使页面在屏幕上完整显示this.transform.call (viewport，translate)；}}.bind(this)，false)；另外，计算当前页面是哪一页，设置当前页码。
//计算当前页码page now=math . round(math . ABS(translate)/page width)1；SetTimeout(function(){ //设置页码。DOM操作需要放到一个子线程中，否则会卡死this . setpagenow()；}.绑定(this)，100)；基本思路就这些。当然，在实际操作过程中也有一些细节需要注意。这里就不赘述了。都可以体现在代码中。源代码已经传给了GitHub:https://github.com/git-onepixel/guesture.
以上是边肖介绍的HTML5单页手势滑屏切换的原理分析。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。