返回 导航

HTML5 / CSS3

hangge.com

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

作者：hangge | 2016-09-16 09:20
1，页面结构说明
页面（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">
            ... 这里是页面内容 ...
          </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. 处理所有页面的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）下面样例中，我们将页面数据保存到一个变量中。 
$$(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 来处理不同的页面。 
$$(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!');
    }
});
评论

全部评论（0）

回到顶部