当前位置: > > > Framewrok7 - 页面(Page)介绍1(页面的结构、事件、以及数据)

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

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