语言: 英文中文

Pages

页面(Pages)

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 回调函数,这样我们可以不用事件,而通过回调函数来做一些操作。