A simple h5 page, using zepto Some APIs of JS can preliminarily explore the production method of h5 effect. In particular, we should pay attention to the problem of white pages when sliding, which is related to the structure of the document. Therefore, automatic quantity judgment is made to solve the display and concealment of the corresponding sequence pages.
When the page is sliding, it will slide to the pages in the corresponding order, as shown in the following figure
Introducing css/js
*Route by document structure* <link rel="stylesheet" href="./css/reset.css"> // Basic configuration css <link rel="stylesheet" href="./css/index.css"> // Static page css <link rel="stylesheet" href="./css/animation.css"> // Animation css <script src="../node_modules/zepto/dist/zepto.min.js"></script> <script src="../node_modules/zepto/src/touch.js"></script> <script src="./js/index.js"></script> // Sliding logic
The structure of the document is as follows:
<div id="container">
<div class="page-group pg-group1 page-current" data-row="1">
<div class="page page-1-1 page-current">
<img class="img_1 pt-page-moveFromTop" src="./images/page1_1.png" alt="">
<img class="img_2 pt-page-moveFromLeft" src="./images/page1_2.png" alt="">
<img class="common_img pt-page-moveIconUp" src="./images/page_up.png" alt="">
</div>
</div>
<div class="page-group pg-group2 hide" data-row="2">
<div class="page page-2-1 hide">
<img class="img_1 hide pt-page-moveFromBottom" src="./images/page2-1_1.png" alt="">
<img class="img_2 hide pt-page-moveCircle" src="./images/page2-1_2.png" alt="">
<img class="img_3 hide pt-page-moveFromLeft" src="./images/page2-1_3.png" alt="">
<img class="img_4 hide pt-page-scaleUp" src="./images/page2-1_4.png" alt="">
<img class="common_img hide pt-page-moveIconUp" src="./images/page_up.png" alt="">
</div>
<div class="page page-2-2 hide">
<img class="img_1 hide pt-page-flipInLeft" src="./images/page2-2_1.png" alt="">
<img class="img_2 hide pt-page-flipInLeft" src="./images/page2-2_2.png" alt="">
<img class="common_img hide pt-page-moveIconUp" src="./images/page_up.png" alt="">
</div>
</div>
<div class="page-group pg-group3 hide" data-row="2">
<div class="page page-3-1 hide">
<img class="img_1 hide pt-page-moveFromTop" src="./images/page3-1_1.png" alt="">
<img class="img_2 hide pt-page-moveCircle" src="./images/page3-1_2.png" alt="">
<img class="img_3 hide pt-page-moveFromRight" src="./images/page3-1_3.png" alt="">
<img class="img_4 hide pt-page-scaleUp" src="./images/page2-1_4.png" alt="">
</div>
<div class="page page-3-2 hide">
<img class="img_1 hide pt-page-moveFromBottom" src="./images/page3-2_1.png" alt="">
<img class="img_2 hide pt-page-moveCircle" src="./images/page3-2_2.png" alt="">
<img class="img_3 hide pt-page-moveToLeft" src="./images/page3-2_3.png" alt="">
</div>
</div>
......You can add more inner page groups
</div>The public icon is the arrow icon at the bottom, which can be customized.
Initialization data
1. Sliding direction
h5 page slides in no more than four directions. Therefore, when initializing data, define a variable to represent four sliding directions
let direction = {up: 1, right: 2, down: 3, left: 4};2. Two horizontal and vertical coordinates
Also initialize two coordinates, representing the page sliding vertically and the page sliding horizontally
let last = {col: 0, row: 0}; // Indicates the exit page
let now = {col: 1, row: 1}; // Indicates the entrance page3. Determine whether the page is sliding
In addition, it should be noted that if the operation is too fast during sliding, the entry page will quickly exit without stable display. In order to prevent this situation, it is necessary to judge whether the current page is in the sliding state during sliding
let isMoving = false; // The default is false, that is, there is no sliding
4. There are several levels of master pages in the calculation document
That is, there are several main pages in the vertical calculation, and the horizontal page is the sub page of the vertical page
let mainPage = $(".page-group").length;Sliding event
That is, sliding events in four directions, up, down, left and right.
1. Slide up
When sliding upward, calculate the coordinates of the exit and entry pages during sliding, and judge whether there is an entry page with corresponding coordinates. If there is, enter, and if not, keep the current page unchanged.
Note: first judge the number of sub pages of the main page of admission to enter the corresponding page. For example, page-2-2 slides up to page-3-2 and corresponds one by one.
$(".page").on("swipeUp", function () {
// Determine whether the page is sliding
if (isMoving) {
return; // In sliding, the current sliding does not take effect
}
// Calculate the coordinates of the lastPage page page after sliding
last.col = now.col;
last.row = now.row;
if (last.col < mainPage) {
// Determine whether the page to exit exists
// Gets the maximum sequence number of the page to appear
let nowRow = $(this).parent('.page-group').next().attr('data-row');
// When the maximum serial number of the exit page is less than the current page, it means that the exit page does not exist and sliding is prohibited
if (nowRow < last.row) {
return;
}
// Calculate the coordinates of the approach page after sliding
now.col = last.col + 1;
now.row = last.row;
movePage(direction.up);
}
})2. Slide down
Logic is similar to sliding down
// Slide down
$(".page").on("swipeDown", function () {
let _this = $(this);
// Determine whether the page is sliding
if (isMoving) {
return; // In sliding, the current sliding does not take effect
}
// Calculate the coordinates of the lastPage page page after sliding
last.col = now.col;
last.row = now.row;
if (last.col > 1) {
// Determine whether the page to exit exists
// Gets the maximum sequence number of the page to appear
let lastRow = $(this).parent('.page-group').prev().attr('data-row');
// When the maximum serial number of the exit page is less than the current page, it means that the exit page does not exist and sliding is prohibited
if (lastRow < now.row) {
return;
}
// Calculate the coordinates of the approach page after sliding
now.col = last.col - 1;
now.row = last.row;
movePage(direction.down);
}
});3. Slide left
When sliding left and right, you should pay attention to whether there will be blank pages, so you need to obtain the number of sub pages of the current main page. Since the exit page is calculated from 0, but the naming of the page and css starts from 1, the sliding coordinate needs to be > 1 and < = mainpage (the number of pages in the current group).
// Slide left
$(".page").on("swipeLeft", function () {
// Determine whether the page is sliding
if (isMoving) {
return; // In sliding, the current sliding does not take effect
}
// Calculate the coordinates of the lastPage page page after sliding
last.col = now.col;
last.row = now.row;
// Gets the number of current page groups
let maxPage = $(this).parent(".page-group").attr("data-row");
if (last.col > 1 && last.col <= mainPage) {
// If the serial number of the page to appear is less than the current number of pages, i.e. slide, otherwise it will not move
if (last.row < maxPage) {
// Calculate the coordinates of the approach page after sliding
now.col = last.col;
now.row = last.row + 1;
movePage(direction.left);
}
}
});4. Slide right
Similar to left
// Slide right
$(".page").on("swipeRight", function () {
// Determine whether the page is sliding
if (isMoving) {
return; // In sliding, the current sliding does not take effect
}
// Calculate the coordinates of the lastPage page page after sliding
last.col = now.col;
last.row = now.row;
if (last.col > 1 && last.col <= mainPage && last.row > 0) {
// If the serial number of the current page is greater than 1 (so that now.row cannot be equal to 1), you can slide. Otherwise, you will not slide
if (last.row > 1) {
// Calculate the coordinates of the approach page after sliding
now.col = last.col;
now.row = last.row - 1;
movePage(direction.right);
}
}
});Define a sliding function
This function is required for sliding in all four directions.
When the page slides, the corresponding styles are added or removed from the entrance and exit page to match the corresponding direction, indicating the explicit and implicit state.
Every picture in the page should be hidden in the initial state (. hide {display: none;}), This will not complete the transition effect when the page is not displayed.
After the slide is completed, the exit page picture will stay on the current page, so it needs to be cleared after the animation is completed, that is, hidden.
Pay attention to adjusting the page sliding state isMoving after the animation is completed.
In fact, it is to match the corresponding css transition animation according to the direction and switch the explicit and implicit states.
// Define a sliding function
function movePage(dir) {
// Initialize the pages that participate in the animation
let lastPage = ".page-" + last.col + "-" + last.row;
let nowPage = ".page-" + now.col + "-" + now.row;
// Initial two animation classes
let inClass = "" // Approach animation class
let outClass = "" // Appearance animation class
// Matching direction
switch (dir) {
case direction.up:
outClass = "pt-page-moveToTop";
inClass = "pt-page-moveFromBottom";
break;
case direction.right:
outClass = "pt-page-moveToRight";
inClass = "pt-page-moveFromLeft";
break;
case direction.bottom:
outClass = "pt-page-moveToBottom";
inClass = "pt-page-moveFromTop";
break;
case direction.left:
outClass = "pt-page-moveToLeft";
inClass = "pt-page-moveFromRight";
break;
}
// Add the animation class to the page participating in the animation
$(lastPage).addClass(outClass).addClass("hide");
$(nowPage).removeClass("hide").addClass(inClass);
// When sliding, set the current sliding state to true
isMoving = true;
// Clear animation class after animation execution
setTimeout(function () {
$(lastPage).find("img").addClass("hide");
$(lastPage).removeClass(outClass).removeClass("page-current").addClass("hide");
$(lastPage).parent('.page-group').removeClass('page-current').addClass('hide');
$(nowPage).parent('.page-group').removeClass('hide').addClass('page-current');
$(nowPage).find("img").removeClass("hide");
$(nowPage).removeClass("hide").addClass("page-current").removeClass(inClass);
// Stop sliding state after animation execution
isMoving = false;
}, 600);
}Finally, it should be noted that the default touch event of the page is prohibited in css Set touch action: none in the page.
Complete project: zeptojs-h5