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!');
    }
});