Framewrok7 - 页面（Page）介绍1（页面的结构、事件、以及数据）

1，页面结构说明
页面（ 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 >

（1） Pages  是必须的，因为同一个  View  下所有的页面切换都在这里。
（2）每一个  Page  都应该放在  Pages  容器中( <div class="pages"> )，而  Pages  必须是  View  的子元素( <div class="view"> )。

（3）每个  Page 都有一个  data-page 属性，存储了一个唯一的  page 名。这个属性不是必须的，但是强烈推荐使用。因为这个属性在  page 事件中或者在  page 回调函数中可以用来帮助我们确定加载的是哪一个页面。

（4）所有的可见的内容，比如列表和表单等，都应该放在  <div class="page-content"> 中，它是  <div class="page"> 的子元素。这样才能保证正确的样式，布局和滚动。

2，Page 事件介绍

（1）在  Page 事件响应中，我们可以通过  JS 来操作加载好的  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"，他也会在老页面上触发。

（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; })

（2）上面将页面数据保存到一个对象中，这个对象里面包含的属性如下：

Page Data Properties
page.name	就是 data-page 设定的名称
page.url	当前页面的URL
page.query	当前页面的get参数，是一个对象。假设你的页面URL是 "about.html?id=10&count=20&color=blue"，那么query就是： { id: '10', count: '20', color: 'blue' }
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

（3）使用样例如下。比如我们可以在一个  handler  中，根据不同的  page.name  来处理不同的页面。

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