H5 single page gesture sliding screen switching principle

The effect diagram looks like this,

1. Principle of realization

Assuming there are 5 pages, each page 100% wide, create a div container viewport, set its width (width) to 500%, then load 5 pages into the container, and let the 5 pages split the entire container, and finally set the container's default position to 0. 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"  >         
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 the Touchstart,touchmove and Touchend events, and when the finger is sliding on the screen, use the transform of CSS3 to set the viewport position in real time, for example, to display the second page, set viewport transform : Translate3d (100%,0,0) can, where we use Translate3d to replace Translatex,translate3d can actively open the mobile GPU accelerated rendering, the page sliding more smoothly.

2. Main ideas

Placing the finger on the screen, sliding the operation, and then leaving the screen is a complete procedure, and the corresponding action triggers the following event:

Put your finger on the screen: Ontouchstart

The finger slides on the screen: Ontouchmove

Finger off Screen: ontouchend

We need to capture these three stages of the touch event to complete the slide of the page:

Ontouchstart: Initializes the variable, records the position of the finger, and records the current time

* * finger on the screen
/Document.addeventlistener ("Touchstart", function (e) {
e.preventdefault ();
var touch = e.touches[0];
StartX = Touch.pagex;
Starty = Touch.pagey;
Initialpos = currentposition; The initial position before the slide is
viewport.style.webkitTransition = ""; Suppresses animation effect
Startt = new Date (). GetTime ()///////////////////////////() (=
false), or whether to produce sliding
}.bind (this);
Ontouchmove: Gets the current location, calculates the movement difference deltax the finger on the screen, and then moves the page to follow

* * Fingers sliding on the screen, the page follows the Finger Movement/Document.addeventlistener ("Touchmove", function (e) {   e.preventdefault ();
   var touch = e.touches[0];
   var deltaX = touch.pageX - startX;
   var deltaY = touch.pageY - startY;    //if the displacement in the x direction is greater than the y direction, then the left and right sliding    if  (Math.Abs (deltax)  > math.abs (DeltaY)) {       moveLength = deltaX;         var translate = initialpos + deltax; //where you want to move now         //if translate>0  or          if  (translate  = maxwidth) {           //mobile page   
         this.transform.call (viewport,translate);            ismove = true;        }        direction =  Deltax>0? " Right ': Left ';  //to judge the direction of the finger sliding    }}.bind (this), false;
Ontouchend: When the finger leaves the screen, the calculation screen eventually stays on which page. First calculate the finger on the screen on the stay time DeltaT if DeltaT

(1) If it is fast sliding, then let the current page complete stay in the center of the screen (need to calculate the current page and how much need to slide)

(2) If it is a slow sliding, you also need to judge the distance of the finger on the screen, if the sliding distance does not exceed the screen width of 50%, you want to fall back to the previous page, the other is to stay on the current page

* * When the finger leaves the screen, the calculation will ultimately need to stay on which page */Document.addeventlistener ("Touchend", function (e) {   e.preventdefault ();
   var translate = 0;    //calculates the time the finger stays on the screen    var deltat = new date (). GetTime ()  
- startt;    if  (ismove) { //has been sliding around         // Use animation transitions to slide the page to the final position         viewport.style.webkitTransition = 
0.3s ease -webkit-transform ";
        if (deltat //If the stay time is less than 300ms, it is considered a fast sliding, regardless of the sliding distance is how much, all stay to the next page             translate = direction =
=  ' left '?             currentposition-(PageWidth+moveLength)
: Currentposition+pagewidth-movelength;             //if the mostThe end position exceeds the boundary position, then stays at the boundary position             translate =  translate > 0 ? 0 : translate; //left Border              translate = translate //Right Border          }else {            // If the sliding distance is less than 50% of the screen, return to the previous page             if  (
Math.Abs (movelength)/pagewidth movelength;             }else{                 //if the sliding distance is greater than 50% of the screen, slide to the next page                  translate = direction
 ==  ' left '?                 currentposition-(pagewidth+movelength): Currentposition+pagewidth-movelength
;                 translate
 = translate > 0 ? 0 : translate;                 translate
 = translate  maxWidth : translate;             }        &NBSP;&NBSP}         //performs sliding, allowing the page to be fully displayed on the screen      
   this.transform.call (viewport,translate); &NBSP;&NBSP;&NBSP;&NBSP}}.bind (this), false);
In addition, calculate the current page is the first few pages, and set the current page number

Calculates the current page number
Pagenow = Math.Round (Math.Abs (translate)/pagewidth) + 1;
settimeout (function () {
//Set page number, Dom operation needs to be placed in a child thread, otherwise there will be a cotton
this.setpagenow ();
Bind (this), 100);
Basic ideas on these, of course, in the actual operation of the process there are some details to be noted, here is not detailed, are reflected in the code.