Pages 页面(Pages) - Framework7 核心库 - [ Framework7 ]

Pages - 和你在网页中打开的页面是同样的意思.

<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">
            ... page content goes here ...
          </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">
            ... page content goes here ...
          </div>
        </div>
      </div>
    </div>          
  </div>
  ...
</body>

<div class="pages"> 是page在同一个View中的容器. Pages 是必须的，因为所有的页面切换都在这里。

几个重要的提示

在 main layout(index.html) 中，每一个 Page 都应该放在 Pages 容器中(<div class="pages">)，而 Pages 必须是 View 的子元素(<div class="view">)。

data-page

你会发现每一个 page 都有一个 data-page 属性，存储了一个唯一的page名。这个属性不是必须的，但是强烈推荐使用。

这个属性在 page 事件中或者在page 回调函数中会非常有用，可以用来帮助我们确定加载的是哪一个页面。

Page 内容

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

Page 事件

现在我们看看页面浏览的时候最重要的一部分 - 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"，他也会在老页面上触发。

有两种方式可以使用这些事件：

// Option 1. Using one 'pageInit' handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
  // Do something here when page loaded and initialized
  
})
 
// Option 2. Using live 'pageInit' event handlers for each page (not recommended)
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
  // Do something here when page with data-page="about" attribute loaded and initialized
})

但是如果我们只用一个handler，如果确定我们加载到的页面到底是哪一个呢？为了解决这个问题，我们在事件中提供了一个详细的数据:

Page 数据

在 Page 事件中，event实例中包含了关于当前Page非常详细的数据：

// Option 1. Using one 'pageInit' handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
  // Page Data contains all required information about loaded and initialized page 
  var page = e.detail.page;
})

在上面的例子中，我们有一个 page 变量存储了页面数据。这个变量是一个对象，有如下属性：

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

我们就可以在一个handler中处理不同的页面了:

$$(document).on('pageInit', function (e) {
    var page = e.detail.page;
    // Code for About page
    if (page.name === 'about') {
        // We need to get count GET parameter from URL (about.html?count=10)
        var count = page.query.count;
        // Now we can generate some dummy list
        var listHTML = '<ul>';
        for (var i = 0; i < count; i++) {
            listHTML += '<li>' + i + '</li>';
        }
        listHTML += '</ul>';
        // And insert generated list to page content
        $$(page.container).find('.page-content').append(listHTML);
    }
    // Code for Services page
    if (page.name === 'services') {
        myApp.alert('Here comes our services!');
    }
});

下一步

现在我们必须要理解页面之间的路由是如何工作的。另外，也需要看看 Page 回调函数，这样我们可以不用事件，而通过回调函数来做一些操作。