Analysis of the principle of gesture sliding screen switching in HTML5 single page

H5 is now also the mainstream in the programming world. H5 single-page gesture sliding screen switching is implemented using HTML5 touch events (Touch) and CSS3 animations (Transform, Transition). Let’s briefly talk about its implementation principles and main features through this article. Ideas, hope it helps everyone.

1. Implementation principle

Assume there are 5 pages, each page takes up 100% of the screen width, create a p container viewport, set its width (width) to 500%, then load 5 pages into the container, and let these 5 pages divide the entire container equally, and finally set the default position of the container to 0. Overflow is set to hidden, so that the screen displays the first page by default.

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

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 When your finger slides on the screen, use CSS3's transform to set the position of the viewport in real time. For example, if you want to display the second page, just set the viewport's transform: translate3d(100%,0,0). Here we use translate3d to 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 operation will trigger the following events:

Put your finger on the screen: ontouchstart

Slide your finger on the screen: ontouchmove

Finger leaves the screen: ontouchend

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

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);

ontouchend: finger When leaving the screen, calculate the page the screen ends up on. First, calculate the dwell time deltaT of the finger on the screen. If deltaT<300ms, it is considered a fast slide. On the contrary, it is a slow slide. The processing of fast slides and slow slides is different:

If it is fast Swipe, let the current page stay completely in the center of the screen (you need to calculate how much of the current page needs to be slid)

If it is a slow slide, you also need to judge the distance of the finger sliding on the screen. If the sliding distance If it does not exceed 50% of the screen width, it will return to the previous page. On the contrary, it will stay on the current page.

/*手指离开屏幕时，计算最终需要停留在哪一页*/
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 == &#39;left&#39;?
            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 == &#39;left&#39;?
                currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
                translate = translate > 0 ? 0 : translate;
                translate = translate < maxWidth ? maxWidth : translate;
            }
        }
        //执行滑动，让页面完整的显示到屏幕上
        this.transform.call(viewport,translate);
    }
}.bind(this),false);

In addition, calculations must be made Which page is the current page and set the current page number

//计算当前的页码
pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;
 
setTimeout(function(){
    //设置页码，DOM操作需要放到子线程中，否则会出现卡顿
    this.setPageNow();
}.bind(this),100);

This is the basic idea. Of course, there are some details that need to be paid attention to during the actual operation. Here I won’t go into details, it’s all reflected in the code, so let’s try it out.

Related recommendations:

javascript - My order page loads slowly

php simple page cache implementation code

Python crawler beta version to capture Zhihu single page

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