上滑手势条跟随屏幕旋转,vue h5手势滑动切换页面
H5单页手势滑屏切换通过HTML5触摸事件和CSS3动画(Transform，Transition)实现。效果图如下所示。本文简要介绍了它的实现原理和主要思想。1、实现原理 假设有五个页面，每个页面占据屏幕宽度的100%。创建一个DIV容器视口，将其宽度设置为500%，然后将五个页面加载到容器中，并让这五个页面平分整个容器。最后，设置容器的默认位置为0和0，溢出为隐藏，这样屏幕默认显示第一页。
XML/HTML代码将内容复制到剪贴板divid= viewport class= viewport div class= pageview style= background:# 3b 76 c 0 H3 page-1/H3/div div class= pageview style= background:# 58 c 03 b；H3 page-2/H3/div div class= pageview style= background:# c03b 25；H3第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样式：
XML/HTML代码将内容复制到剪贴板。视口{宽度：500%；身高：100%；显示：-WebKit-box；溢出：隐藏；指针事件：无；-WebKit-transform:translate 3d(0，0，0)；背面-可见性：隐藏；位置：相对；}注册touchstart、touchmove和touchend事件。当手指在屏幕上滑动时，使用CSS3的transform实时设置视口的位置。例如，要显示第二页，只需设置transform:translate3d(100%，0，viewport。这里我们用translate3d代替translateX，可以主动开启手机的GPU加速渲染，让页面滑动更加流畅。2、主要思路
从手指放在屏幕上，滑动，到离开屏幕，是一个完整的操作过程。相应的操作将触发以下事件：
把你的手指放在屏幕上：触摸开始
在屏幕上滑动手指：触摸移动
手指离开屏幕：触摸
我们需要捕捉触摸事件的这三个阶段来完成页面的滑动：
Ontouchstart:初始化变量，记录手指的位置并记录当前时间。
XML/HTML代码将内容复制到剪贴板/*将手指放在屏幕上*/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=newDate()。getTime()；//记录手指按压的开始时间isMove=false//是否产生滑移}。bind(this)，false)；Ontouchmove:获取当前位置，计算手指在屏幕上移动的差值deltaX，然后让页面跟随移动。
XML/HTML代码复制内容到剪贴板/*手指在屏幕上滑动，页面随手指移动*/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；vartranslate=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，则认为是快速滑动，反之则认为是慢速滑动。快速滑动和慢速滑动的处理是不同的：
(1)如果是快速滑动，让当前页面完全停留在屏幕中央(需要计算当前页面需要滑动多少)。
(2)如果是慢速滑动，也需要判断手指在屏幕上滑动的距离。如果滑动距离没有超过屏幕宽度的50%，您应该返回到上一页，而不是停留在当前页面。
XML/HTML代码将内容复制到剪贴板/*当手指离开屏幕时，计算最终需要停留在哪个页面*/document . addevent listener( Touched ，function(e){ e . prevent default()；var translate=0；//计算手指停留在屏幕上的时间vardeltat=newdate()。GetTime()-startt；If(isMove){//发生左右滑动//使用动画过渡使页面滑动到最终位置viewport . style . webkittransition= 0.3 season-WebKit-transform ；If(deltaT300){//如果停留时间小于300ms，则认为是快速滑动。不管滑动的距离是多少，它都停留在下一页translate=direction==left ？current position-(page width moveLength):current position page width-moveLength；//如果最终位置超过边界位置，停留在边界位置translatetranslate=translate0？0:翻译；//左边界translate 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；translatetranslate=translate0？0:翻译；translate translate=translate max width？maxWidth:translate；} }//进行滑动，使页面在屏幕上完整显示this.transform.call (viewport，translate)；} }.bind(this)，false)；另外，计算当前页面是哪一页，设置当前页码。
XML/HTML代码复制内容到剪贴板//计算当前页码page now=math . round(math . ABS(translate)/page width)1；SetTimeout(function(){ //设置页码。DOM操作需要放到一个子线程中，否则会卡死this . setpagenow()；}.绑定(this)，100)；基本思路就这些。当然，实际操作过程中还有一些细节需要注意，这里就不赘述了。都可以体现在代码中。关于HTML5单页手势滑屏切换原理，边肖就给你介绍这么多，希望对你有帮助！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。