1, page structure description
Pages (pages) and the pages we open in the Web page are the same meaning, such as a simple example below.
<body>
...
<!--views-->
<div class= "views" >
<!--Your Main view-->
<div class= "View View-main" >
<!--Pages-->
<div class= "Pages" >
<div class= "page" data-page= "Home" >
<div class= "Page-content" >
... Here is the page content ...
</div>
</div>
</div>
</div>
<!--Another View-->
<div class= "View Another-view" >
<!--Pages-->
<div class= "Pages" >
<div class= "page" data-page= "Home-another" >
<div class= "Page-content" >
... Here is the page content ...
</div>
</div>
</div>
</div>
</div>
...
</body>
(1) pages are required because all page transitions under the same View are here.
(2) Each Page should be placed in the pages container (<div class= "pages" >) and the pages must be child elements of view (<div class= "View" >).
(3) Each page has a Data-page property that stores a unique page name. This attribute is not required, but is strongly recommended. Because this property can be used in the page event or in the page callback function to help us determine which page is loaded.
(4) All visible content, such as lists and forms, should be placed in the <div class= "Page-content" >, which is the child element of <div class= "page" >. This will ensure proper styling, layout, and scrolling.
2,page Event Introduction
(1) In the page event response, we can use JS to manipulate the loaded page. The specific events are as follows:
Event Target Description
Pagebeforeinit Page Element
<div class= "page" > when Framework7 inserts a new page into the DOM, it triggers
Pageinit Page Element
<div class= "page" > When FRAMEWORK7 initializes the component of the page, it triggers
Pagereinit Page Element
<div class= "page" > This event is triggered when cached page becomes visible.
It is only applicaple for Inline pages (DOM cached pages)
Pagebeforeanimation Page Element
<div class= "page" > triggers when page initialization is complete and can be animated
Pageafteranimation Page Element
<div class= "page" > trigger after page animation completes
Pagebeforeremove Page Element
This event is triggered before <div class= "page" > page is removed from the DOM. This method is useful if you want to do some lifting of the event bindings or destroy some plug-ins.
Pageback Page Element
<div class= "page" > triggers this event before returning to the previous page animation. The difference with "pagebeforeanimation" is that the event triggers on the old page, which is the page that slides from the middle to the right.
Pageafterback Page Element
<div class= "page" > returns to the previous page after the animation has finished executing the event. Similarly, unlike "pageafteranimation", he will also trigger on the old page.
(2) There are two ways to use these events. Here's an example of the Pageinit event:
Mode 1. Process Pageinit events for all pages (recommended):
$$ (document). On (' Pageinit ', function (e) {
Execute some code when the page is loaded and initialized ....
})
Mode 2. Handles the Pageinit event (not recommended) for the specified page (data-page= "about"):
$$ (document). On (' Pageinit ', '. page[data-page= "About"] ", function (e) {
Execute some code when the page is loaded and initialized ....
})
3,page Data Introduction
In the page event, the event instance contains very detailed data about the current page.
(1) In the example below, we save the page data to a variable.
$$ (document). On (' Pageinit ', function (e) {
Get the page data, which holds all the request information
var page = E.detail.page;
})
(2) the page data is saved to an object, which contains the following attributes:
Page Data Properties
Page.name is the name Data-page set.
Page.URL the URL of the current page
Page.query the current page's get parameter, which is an object. If your page URL is "About.html?id=10&count=20&color=blue", then query is:
{
ID: ' 10 ',
Count: ' 20 ',
Color: ' Blue '
}
Page.view object. Contains the view object for the current page (if the view is already initialized)
Page.container Page corresponds to the HtmlElement
Page.from string in which direction the current page is loaded. If it is a newly loaded page, "right" and "left" if it is the page that returns the previous step.
Page.navbarinnercontainer Navbar-inner "corresponding to the HtmlElement, only the dynamic navigation bar.
Page.swipeback Boolean. Whether the current page is sliding back. can only be accessed in Onpagebefore/afteranimation callback functions/events.
Page.context object. The Template7 context of this page
Page.frompage object. Pagedata on previous page
(3) Use samples such as below. For example, we can process different pages in a handler based on different page.name.
$$ (document). On (' Pageinit ', function (e) {
var page = E.detail.page;
Process about page
if (Page.name = = ' about ') {
Gets the count parameter value in the URL (about.html?count=10)
var count = Page.query.count;
Generate a list of corresponding quantities based on count
var listhtml = ' <ul> ';
for (var i = 0; i < count; i++) {
listhtml + = ' <li> ' + i + ' </li> ';
}
listhtml + = ' </ul> ';
Populate the page content area with list data
$$ (Page.container). Find ('. Page-content '). Append (listhtml);
}
Process Services Page
if (Page.name = = ' Services ') {
Myapp.alert (' Here Comes our services! ');
}
});
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
