How to implement gesture sliding screen switching in HTML5 single page

This time I will show you how to implement HTML5 single page gesture sliding screen switching. How to implement HTML5 single page gesture sliding screen switching? What are the precautions for HTML5 single-page gesture sliding screen switching? The following is a practical case, let’s take a look.

H5 single page gesture sliding screen switching is implemented using HTML5 touch events (Touch) and CSS3 animation (Transform, Transition)

1. Implementation principle

Assume there are 5 pages, each page occupies 100% of the screen width, then create a DIV container viewport, set its width (width) to 500%, then load the 5 pages into the container, and let this Five pages divide the entire container equally. Finally, the default position of the container is set to 0 and the overflow is set to hidden, so that the screen displays the first page by default.

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

CSS style:

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

Register touchstart, touchmove and touchend events. When your finger slides on the screen, use CSS3 transform to set the position of the viewport in real time, for example, to display the second page, just set the viewport's transform: translate3d(100%,0,0). Here we use translate3d instead of translateX. translate3d can actively turn on the mobile phone's GPU to accelerate rendering, making the page slide more smoothly.

2. Main idea

It is a complete operation process from placing your finger on the screen, sliding operation, and then leaving the screen. The corresponding operation will trigger the following events:

Finger on the screen: ontouchstart

Finger sliding on the screen: ontouchmove

Finger off the screen: ontouchend

We need to capture these three stages of touch events to complete Page sliding:

ontouchstart: Initialize variables, record the position of the finger, record the current time

/*手指放在屏幕上*/
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: Get the current position, calculate the movement difference deltaX of the finger on the screen, and then Make the page follow the movement

/*手指在屏幕上滑动，页面跟随手指移动*/
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);

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use video and audio tags and progress bars in H5

New interaction between H5 and C3 What are the features

H5 block-level tag summary

The above is the detailed content of How to implement gesture sliding screen switching in HTML5 single page. For more information, please follow other related articles on the PHP Chinese website!