页面(Pages)和我们在在网页中打开的页面是同样的意思,比如下面一个简单的样例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < 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" > ... 这里是页面内容 ... </ 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" > ... 这里是页面内容 ... </ div > </ div > </ div > </ div > </ div > ... </ body > |
(2)每一个 Page 都应该放在 Pages 容器中(<div class="pages">),而 Pages 必须是 View 的子元素(<div class="view">)。
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",他也会在老页面上触发。 |
(2)有两种方式可以使用这些事件。下面以 pageInit 事件为例:
1 2 3 4 5 6 7 8 9 10 | // 方式1. 处理所有页面的pageInit事件 (推荐): $$(document).on( 'pageInit' , function (e) { // 当页面加载并初始化完毕后执行一些代码.... }) // 方式2. 处理指定页面(data-page="about")的 pageInit事件 (不推荐): $$(document).on( 'pageInit' , '.page[data-page="about"]' , function (e) { // 当页面加载并初始化完毕后执行一些代码.... }) |
3,Page 数据介绍
在 Page 事件中,event 实例中包含了关于当前页面非常详细的数据。
(1)下面样例中,我们将页面数据保存到一个变量中。
1 2 3 4 | $$(document).on( 'pageInit' , function (e) { //获取页面数据,这里面保存了所有的请求信息 var page = e.detail.page; }) |
Page Data Properties | |
---|---|
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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $$(document).on( 'pageInit' , function (e) { var page = e.detail.page; // 处理about页面 if (page.name === 'about' ) { // 获取url中的count参数值 (about.html?count=10) var count = page.query.count; // 根据count生成对应数量的列表 var listHTML = '<ul>' ; for ( var i = 0; i < count; i++) { listHTML += '<li>' + i + '</li>' ; } listHTML += '</ul>' ; // 将列表数据填充到页面内容区域上 $$(page.container).find( '.page-content' ).append(listHTML); } // 处理services页面 if (page.name === 'services' ) { myApp.alert( 'Here comes our services!' ); } }); |
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1353.html