一：Page
一个page文件定义了一个app页面，它可以定义该页面的导航栏、底部工具栏、中间详细内容等等。
page通过加载到view容器中运行，而view在index.html中定义。
index.html定义了app的基本结构：引入样式文件、引入js文件、创建app标签、创建view标签。
因此，page的定义文件 XX.html 不需要在定义head、body等等部分，只需要使用 div 搭建出页面的 状态栏、侧边栏、页面内容(导航栏、主体部分、底部工具栏)。（不是每部分都要有，按需搭建即可）。
【注：view组件中也可以通过div搭建视图的 导航栏、二级导航栏、popup菜单等，但页面内容主体部分仍然需要通过 pages div 来引入或直接在其中定义一个page】
二：定义page文件
新建一个 页面名.html 文件，不需要在定义head、body等等部分、不需要导入样式、js文件，只需用div搭建页面内容即可。
<div class="page" data-name="页面名"> <div class="page-content"> 页面内容： 可选：状态栏、侧边栏、导航栏、list、滚动视图、工具栏等等 </div> </div>
三：page的跳转
可以通过 <a> 标签来加载、跳转页面。
四：page的生命周期函数
1）旧版
针对page的操作，最多就是在page的生命周期中进行一些操作，如：页面初始化时进行一些数据赋值等。
格式：
// Option 1. 为所有page的init事件定义相应函数 $$(document).on(‘pageInit‘, function (e) { // 在这里根据page的不同进行不同的操作
var page = e.detail.page;//获取该事件发生的page
var pageName = page.name;//获取page名称
//根据pageName不同，进行不同操作
}) // Option 2. 为每个page的init事件逐一定义函数（不推荐）【太分散】 $$(document).on(‘pageInit‘, ‘.page[data-page="about"]‘, function (e) { // Do something here when page with data-page="about" attribute loaded and initialized
var page = e.detail.page;//获取该事件发生的page;
//通过page对象，调用一些page的属性 或者 方法。
})
事件列表：
| Event | Target | Description |
|---|---|---|
| pageBeforeInit | Page Element<div class="page"> | 当Framework7把新页面插入DOM的时候会触发 |
| pageInit | Page Element<div class="page"> | 当Framework7初始化页面的组件的时候会触发 |
| pageReinit | Page Element<div class="page"> | This event will be triggered when cached page becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
| pageBeforeAnimation | Page Element<div class="page"> | 当页面初始化完成并且可以做动画的时候触发 |
| pageAfterAnimation | Page Element<div class="page"> | 在页面动画完成之后触发 |
| pageBeforeRemove | Page Element<div class="page"> | Page从DOM中移除之前就会触发这个事件。如果你希望做一些解除事件绑定或者销毁一些插件的时候，这个方法是很有用的。 |
| pageBack | Page Element<div class="page"> | 在返回上一页动画执行之前就会触发这个事件。和 "pageBeforeAnimation" 的不同之处在于，这个事件在老页面上也会触发，也就是那个从中间滑动到右边的页面。 |
| pageAfterBack | Page Element<div class="page"> | 返回上一页动画执行完成之后触发这个事件。同样，区别于"pageAfterAnimation"，他也会在老页面上触发。 |
page的内置属性列表：
| page.name | 就是 data-page 设定的名称 |
| page.url | 当前页面的URL |
| page.query | 当前页面的get参数，是一个对象。假设你的页面URL是 "about.html?id=10&count=20&color=blue"，那么query就是：
|
| page.view | object. 包含当前页面的view对象(前提是view已经初始化完成) |
| page.container | Page 对应的 HTMLElement |
| page.from | string - 当前页面从哪个方向加载进来。如果是新加载的页面，则为"right"，如果是返回上一步的页面，则为"left" |
| page.navbarInnerContainer | navbar-inner" 对应的 HTMLElement，只有动态导航栏才有。 |
| page.swipeBack | boolean。当前页面是否是滑动返回的。只有在 onPageBefore/AfterAnimation 回调函数/事件 中才可以访问。 |
| page.context | object. 这个页面的 Template7 上下文 |
| page.fromPage | object. 上一个页面的pageData |
2）新版
格式：与旧版一样。
// Option 1. Using one ‘page:init‘ handler for all pages $$(document).on(‘page:init‘, function (e) { // Do something here when page loaded and initialized }) // Option 2. Using live ‘page:init‘ event handlers for each page $$(document).on(‘page:init‘, ‘.page[data-name="about"]‘, function (e) { // Do something here when page with data-name="about" attribute loaded and initialized })
事件列表：
| Event | Target | Description |
|---|---|---|
| page:mounted | Page Element<div class="page"> | Event will be triggered when new page just inserted to DOM |
| page:init | Page Element<div class="page"> | Event will be triggered after Framework7 initialize required page‘s components and navbar |
| page:reinit | Page Element<div class="page"> | This event will be triggered in case of navigating to the page that was already initialized. |
| page:beforein | Page Element<div class="page"> | Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position) |
| page:afterin | Page Element<div class="page"> | Event will be triggered after page transitioned into view |
| page:beforeout | Page Element<div class="page"> | Event will be triggered right before page is going to be transitioned out of view |
| page:afterout | Page Element<div class="page"> | Event will be triggered after page transitioned out of view |
| page:beforeremove | Page Element<div class="page"> | Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory |
page数据：
| page.app | object | Initialized app instance |
| page.view | object | View instance that contains this page (if this View was initialized) |
| page.router | object | Router instance that contains this page (if this View was initialized). Same as page.view.router |
| page.app | string | Initialized app instance |
| page.name | string | Value of page‘s data-name attribute |
| page.el | HTMLElement | Page element |
| page.$el | object | Dom7 instance with Page element |
| page.navbarEl | HTMLElement | Related navbar element for this page. Available only in iOS theme with dynamic navbar enabled. |
| page.$navbarEl | object | Dom7 instance with related navbar element for this page. Available only in iOS theme with dynamic navbar enabled. |
| page.from | string | Page position before transition or direction of where this Page comes from. It will be next if you load new page, previous - if you go back to this page, or current if this page replaces the currently active one. |
| page.to | string | New page position or where this page goes to. Can be same next, previous or current |
| page.position | string | Alias for page.from |
| page.direction | string | Direction of page transition (if applicable). Can be forward or backward |
| page.route | object | Route associated with this page |
| page.pageFrom | object | Page data of the page that was currently active before this new page. |
| page.context | object | Template7 context that was passed for this page when using Template7 pages |
| page.fromPage | object | Page Data object of the previously active page |
五：回调函数
上面的方法中，还需要通过参数e获取page对象，比较麻烦。
F7提供了回调函数，针对上面的事件可以触发回调函数，回调函数的参数会自动把page对象传递过来，十分方便。
格式：
myApp.onPageBeforeInit(pageName, callback(page)) - 当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发。
- pageName - string - 页面的 "data-page" 属性
- callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数
myApp.onPageInit(pageName, callback(page)) - 当Framework7初始化一个页面(必须带有data-page属性)的组件和导航栏的时候会触发。
- pageName - string - 页面的 "data-page" 属性
- callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数
myApp.onPageReinit(pageName, callback(page)) - "callback" function will be executed for specified cached page (with "pageName" data-page attribute) that becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
- pageName - string - expected page‘s "data-page" attribute
- callback(page) - function - callback function that will be executed. As an argument it receives Page Data object
myApp.onPageBeforeAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)初始化完成并且可以开始做动画的时候触发
- pageName - string - 页面的 "data-page" 属性
- callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数
myApp.onPageAfterAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)动画完成之后会触发
- pageName - string - 页面的 "data-page" 属性
- callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数
myApp.onPageBeforeRemove(pageName, callback(page)) - 当一个页面(有 data-page 属性)从DOM移除之前会触发
- pageName - string - 页面的 "data-page" 属性
- callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数
myApp.onPageBack(pageName, callback(page)) - 当页面开始执行返回动画之前调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。
- pageName - string - 你要操作的page的 "data-page" 指定的名字
- callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。
myApp.onPageAfterBack(pageName, callback(page)) - 当页面开始执行返回动画完成之后调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。
- pageName - string - 你要操作的page的 "data-page" 指定的名字
- callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。
六：让页面在app初始化之前初始化
因为我们在js文件中是先创建的app对象，在定义各个页面的回调函数的，所以app初始化时不能获取到页面的回调函数的结果。
对于这种情况，我们可以将app的初始化动作改为手动，在页面的回调函数之后执行：
var myApp = new Framework7({ init: false //Disable App‘s automatica initialization }); //Now we add our callback for initial page myApp.onPageInit(‘home‘, function (page) { //Do something here with home page }); //And now we initialize app myApp.init();
