In the era of Web apps and hybrid apps, in order to have a better user experience, single-page application of the trend, single-page application for short ' SPA ', that is, the only one HTML page application application, All of the views in the app are contained in this HTML page and control the display and hiding of related views via JavaScript, which allows users to feel the speed and fluency of the native app in the Web App. The goal of this article is to teach you how to quickly build a H5 single-page toggle skeleton.
First, the page design
When building a spa app, first determine which views your app needs to include, and here we only need to build three views-the home page, list pages, and list detail pages-in order to illustrate the problem. The logical relationship of these three pages is:
(1) program start, default into the home page
(2) Click on the homepage button to switch to the list page
(3) Click the button on the list page to switch to the list details page
(4) Click the Back button or the physical return key to go back to the previous page.
First, let's look at the core HTML code:
<Body> <Divclass= "PageView"style= "background: #3b76c0"ID= "-main-view"> <H3>Home</H3> <Divtitle= "-list-view"class= "Right-arrow"></Div> </Div> <Divclass= "PageView"style= "background: #58c03b;d isplay:none"ID= "-list-view"> <H3>List page</H3> <Divclass= "Left-arrow"></Div> <Divtitle= "-detail-view"class= "Right-arrow"></Div> </Div> <Divclass= "PageView"style= "background: #c03b25;d isplay:none"ID= "-detail-view"> <H3>List Details page</H3> <Divclass= "Left-arrow"></Div> </Div></Body>
class= ' pageview ' div container contains a separate view page, the body has 3 such div, it should be noted that the 2nd, 3 div are set style= ' Display:none ', but the 1th view is not set, The purpose of this is to have the first page displayed by default when the program starts.
In this code, using a common CSS class to describe the style of each view and the transition effect, this class is ' PageView ', let's first look at how PageView is defined:
. PageView { position: absolute; Left: 0; top:0; width: 100%; height: 100%; Overflow: hidden; -webkit-transition: 0.4s ease-out-webkit-transform;}Here, the view page needs to be set to absolute positioning, and the parent container, such as width and so on, so that the view can be smooth to switch, also need to set the transition effect of the page switch, we use CSS3 transition property, the specific parameters are not here to do too much explanation, we should all understand. The effect of this style class is that when you change the value of the-webkit-transform, the page pans with the transitions defined in the style, with a duration of 0.4s. So far, the main page design has been completed.
Second, logical control
To achieve the page switching, you have to control the two pages at the same time translation, that is, the current page constantly leaving the screen, the new page constantly into the screen. To facilitate the description, we called the original page ' CurrentView ', the new page is called ' Applyview ', that is, the application to enter the view. If you use transform to describe, CurrentView need to translate from the original 0% to 100%, that is, the page moved to pan left a page width distance, at the same time, Appyview need to shift from the original 100% to 0%, Just occupy the original position of CurrentView, of course, before panning, we need to set the initial position of CurrentView and Applyview, respectively, set to 0% and 100%.
//page panning to the leftvarCurrentviewstart = "TranslateX (0%)",//CurrentView Initial PositionApplyviewstart = "TranslateX (100%)",//Applyview Initial PositionCurrentviewend = "TranslateX (-100%)",//the final position of the CurrentViewApplyviewend = "TranslateX (0%)";//Applyview Final Position//page translation to the rightif(Direction = = "Right") {Currentviewstart= "TranslateX (0%)"; Applyviewstart= "TranslateX (-100%)"; Currentviewend= "TranslateX (100%)"; Applyviewend= "TranslateX (0%)"}
We know that through the JS operation needs to get the DOM object of the page, in order to reduce the DOM query, in the page load, we will all need to use the Page object one-time query out, and in the form of key-value pairs stored in the Map object, when needed to use, only need to be based on key to obtain.
// Initialize execution initviewpool:function() { var views = Document.queryselectorall (". PageView "); // use the array's foreach through call to traverse the nodelist Array.prototype.forEach.call (views,function(item) { // Viewpool is a global object // The ID of the DOM as the key });Below we will use JS to control the page switching effect:
//gets the DOM object for the current pagevarCurrentView =Viewpool[currentviewid];//gets the DOM object for the new pagevarApplyview =Viewpool[pageid];//set the initial position of a new pageApplyView.style.webkitTransform =Applyviewstart;//set the initial position of the current pageCurrentView.style.webkitTransform =Currentviewstart;//set new page displayApplyView.style.display = "";varT1 = SetTimeout (function(){ //When the final position is set, the page pans to the final position with the transition effectApplyView.style.webkitTransform =Applyviewend; CurrentView.style.webkitTransform=currentviewend;},200);varT2 = SetTimeout (function(){ //400ms, page translation end, set CurrentView as hiddenCurrentView.style.display = "None"; //set the new page as the current pageCurrentviewid =pageId; if(Direction = = = ' Left ') {Window.location.hash= currentviewid.substring (1); } window.cleartimeout (t1); Window.cleartimeout (T2);},600);
Here is an important operation is: Be sure to set the final position of the operation into the timer, that is, T1, this is because when the initial position of the page is set, it takes a certain amount of time to ' render ' this style, the 2nd timer is to wait for the animation after the completion of the relevant operation, such as setting the current page, Set hash, clear timer and so on. When this code is executed, the page will move smoothly with the set effect, finally, the current page is hidden, and the new page is set to display the current page to the center of the screen, thus completing a single page transition effect.
Third, support physical key return
Since it is a single page switch, you have to ask another question, that is, the physical return key operation. In fact, the single page switch is only the page display and hide operation, this is not the real meaning of the hash jump, and physical key return is actually listening to the browser hash changes, so in order to allow a single page to support the physical key return operation, we need to simulate the browser hash changes, That is, when a new page enters, to the current address with a #hash identity, when the physical return to the key, the hash value will change (fall back to the last hash), at the same time will trigger a Hashchange event, when the prison heard the hash changes, We can use JS to switch the corresponding page of the hash, so that the effect of the physical return key is realized.
if (Direction = = = ' Left ') { // when entering a new page, set the value of the current hash to the ID of the current page Window.location.hash = Currentviewid.substring (1);}Monitoring the processing of hash changes:
varthat = This; Window.addeventlistener ("Hashchange",function () { //When you click the Back button, the hash will fall back to the hash value of the previous page. //get the hash value of the previous page and convert it to the ID of the corresponding view varid = window.location.hash.replace ("#", "-"); //Judging the current page is not the homepage, //and trigger the ' back ' operation of the browser, that is, click the Return button, because the page will also occur when the hash changes if(Currentviewid! = "-main-view" && id! =Currentviewid) {ID= ID | | "-main-view";//If the previous page is the first, then the hash is empty, then you need to fill in the corresponding ID //call the forward method to switch from the current page to the previous pageThat.forward (ID, "right"); }}, false);
The above is the basic idea of single page switching, the corresponding complete sample code has been uploaded to Github:https://github.com/git-onepixel/h5spa, you can download the full code for debugging and learning, if you need to see the effect of the demonstration, Please click or use the QR code below to access:
Examples are for informational and learning purposes only and may not be copied and used for any other purpose!
by @ One pixel Blog Park 2016.01
Combat experience: Quickly build H5 single-page toggle skeleton
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
