贊助者成為贊助者

頁面

頁面是主要元件（容器）之一，用於顯示應用程式內容。

頁面配置

<div class="page" data-name="home">
  <div class="page-content">
    ... scrollable page content goes here ...
  </div>
</div>

頁面名稱

您可能會注意到，每個頁面都有具有唯一頁面名稱的 data-name 屬性。這不是必需的，但在「頁面事件」或「頁面回呼」中會很有用。它可以幫助我們定義已載入且可用的頁面，以便您可以對頁面進行必要的調整。

頁面內容

所有視覺內容（例如清單檢視、表單等）都應放入 <div class="page-content"> 中，而 <div class="page"> 應為其子項。這對於正確的造型、配置和捲動是必需的。

頁面事件

現在讓我們來看看頁面導覽中最重要的部分之一，「頁面事件」。頁面事件允許我們透過為特定頁面執行 JavaScript 來調整剛載入的頁面

事件目標說明
page:mounted頁面元素<div class="page">當新頁面剛插入 DOM 時，將觸發事件。或當具有 keepAlive 路徑的頁面已掛載/附加到 DOM 時
page:init頁面元素<div class="page">在 Framework7 初始化必需的頁面元件和導覽列後，將觸發事件
page:reinit頁面元素<div class="page">在導覽至已初始化的頁面的情況下，將觸發此事件。
page:beforein頁面元素<div class="page">當所有內容都已初始化且頁面已準備好轉換為檢視（進入主動/目前位置）時，將觸發事件
page:afterin頁面元素<div class="page">在頁面轉換為檢視後，將觸發事件
page:beforeout頁面元素<div class="page">在頁面即將轉換出檢視之前，將觸發事件
page:afterout頁面元素<div class="page">在頁面轉換出檢視後，將觸發事件
page:beforeunmount頁面元素<div class="page">當具有 keepAlive 路徑的頁面即將從 DOM 中卸載/分離時，將觸發事件
page:beforeremove頁面元素<div class="page">在頁面從 DOM 中移除之前，將觸發事件。如果您需要分離一些事件/摧毀一些外掛程式以釋放記憶體，此事件會非常有用。此事件不會觸發 keepAlive 路徑。
page:tabshow頁面元素<div class="page">當頁面的父項 檢視為分頁 變為可見時，將觸發事件
page:tabhide頁面元素<div class="page">當頁面的父項 檢視為分頁 變為隱藏時，將觸發事件

讓我們看看如何使用這些事件。有兩種方法可以新增頁面事件處理常式

// Option 1. Using one 'page:init' handler for all pages
$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
})

// Option 2. Using live 'page:init' event handlers for each page
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

頁面載入順序類別

當一個新頁面載入並轉換為檢視（應用程式的可見主要部分）時，它在頁面元素上具有不同的類別。

當我們載入/開啟新頁面時，會發生以下情況

  1. 目前活動的頁面具有page-current類別。
  2. 如果我們載入的頁面不在 DOM 中（例如透過 Ajax 或使用範本或從元件載入），它將被新增到 DOM 中。
  3. 我們載入/開啟的頁面將在其元素上設定額外的page-next類別。
  4. 路由器元素（<div class="view">）將具有額外的router-transition-forward類別，它執行以下動作
    • 具有page-next（新頁面）類別的頁面移至檢視中
    • 具有page-current（目前頁面）類別的頁面移出檢視
  5. 轉換完成後，我們載入的新頁面將具有page-current類別
  6. 而先前活動的頁面將具有page-previous類別

當我們載入/開啟前一頁面（返回）時，會發生以下情況

  1. 目前活動的頁面具有page-current類別。
  2. 如果我們返回的頁面不在 DOM 中（例如透過 Ajax 或使用範本或從元件載入），它將被新增到 DOM 中。
  3. 我們返回的頁面將在其元素上設定額外的page-previous類別。
  4. 路由器元素（<div class="view">）將具有額外的router-transition-backward類別，它執行以下動作
    • 具有page-previous（我們返回的頁面）類別的頁面移至檢視中
    • 具有page-current（目前頁面）類別的頁面移出檢視
  5. 轉換完成後，我們返回的新頁面將具有page-current類別
  6. 而先前活動的頁面將具有page-next類別。如果這個頁面是動態新增到 DOM 中的，它將從 DOM 中移除。

頁面資料

正如你所看到的，這非常容易，但當我們只使用一個處理常式時，如何確定載入哪個頁面？對於這種情況，我們在事件詳細資料中提供頁面資料

// In page events:
$$(document).on('page:init', function (e) {
  // Page Data contains all required information about loaded and initialized page
  var page = e.detail;
})

或者，如果事件處理常式是使用 Dom7 指定的，如同上述範例，則它將傳遞到第二個引數中

// In page events:
$$(document).on('page:init', function (e, page) {
  console.log(page);
})

現在，在上述範例中，我們在page變數中提供頁面資料。它是一個具有以下屬性的物件

page.app物件初始化應用程式實例
page.view物件包含此頁面的檢視實例（如果已初始化此檢視）
page.router物件包含此頁面的路由器實例（如果已初始化此檢視）。與 page.view.router 相同
page.name字串頁面 data-name 屬性的值
page.elHTMLElement頁面元素
page.$el物件具有頁面元素的 Dom7 實例
page.from字串過渡前或此頁面來源方向的頁面位置。如果您載入新頁面，它將會是 next；如果您返回此頁面，它將會是 previous；如果此頁面取代目前活動的頁面，它將會是 current。
page.to字串新頁面位置或此頁面前往的位置。可以是相同的 next、previous 或 current
page.position字串page.from 的別名
page.direction字串頁面過渡的方向（如果適用）。可以是 forward 或 backward
page.route物件與此頁面相關聯的路由，包含用於載入此頁面的目前路由資料的物件。它有以下屬性
  • url - 路由 URL
  • path - 路由路徑
  • query - 包含路由查詢的物件。如果 URL 是 /page/?id=5&foo=bar，它將包含以下物件 {id: '5', foo: 'bar'}
  • params - 路由參數。如果我們有與 /page/user/:userId/post/:postId/ 路徑和頁面 URL 為 /page/user/55/post/12/ 相符的路由，它將會是以下物件 {userId: '55', postId: '12'}
  • name - 路由名稱
  • hash - 路由 URL hash
  • route - 包含可用路由中相符路由的物件
  • context - 傳遞至路由的內容
page.pageFrom物件此新頁面前目前活動的頁面資料。

存取頁面資料

如果您不使用頁面事件/回呼，且需要存取頁面資料，您可以透過其 HTMLElement 上的 f7Page 屬性來存取

var $$ = Dom7;

var page = $$('.page[data-name="somepage"]')[0].f7Page;

// do something with page data

CSS 變數

以下是相關 CSS 變數（CSS 自訂屬性）的清單。

請注意，註解的變數未預設指定，且其值是它們在此情況下的後備值。

:root {
  --f7-page-master-width: 320px;
  --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  --f7-page-master-border-width: 1px;
  --f7-page-swipeback-transition-duration: 300ms;
  --f7-page-parallax-transition-duration: 500ms;
  --f7-page-cover-transition-duration: 450ms;
  --f7-page-dive-transition-duration: 500ms;
  --f7-page-fade-transition-duration: 500ms;
  --f7-page-flip-transition-duration: 700ms;
  --f7-page-push-transition-duration: 500ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
  --f7-page-title-line-height: 1.2;
  --f7-page-title-text-color: inherit;
  --f7-page-title-padding-left: 16px;
  --f7-page-title-padding-right: 16px;
}
.ios {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 700;
  --f7-page-title-letter-spacing: -0.03em;
  --f7-page-title-padding-vertical: 6px;
  --f7-page-bg-color: #efeff4;
}
.ios .dark,
.ios.dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 500;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-page-bg-color: var(--f7-md-surface);
}
.dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
}
改善此文件
在此頁面上