页面

页面是用于显示应用内容的主要组件（容器）之一。

页面布局

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

页面名称

如您所注意到的，每个页面都有一个具有唯一页面名称的属性。它不是必需的，但在“页面事件”或“页面回调”中可能很有用。它可以帮助我们定义哪个页面已加载并可用，以便您可以对页面进行必要的操作。data-name attribute with a unique page name. It's not required but can be useful within "page events" or "page callbacks". It can help us to define which page is loaded and available so you can make required manipulations to the page.

页面内容

所有视觉内容（如列表视图、表单等）都应放在<div class="page-content">中，它应该是<div class="page">的子元素。这对于正确的样式、布局和滚动是必需的。

页面事件

现在让我们来看看页面导航的最重要部分之一，“页面事件”。页面事件允许我们通过为特定页面执行JavaScript来操作刚加载的页面：

事件Target描述
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属性
的值HTMLElement页面元素
page.$el对象具有页面元素的Dom7实例
page.from字符串页面转换之前的页面位置或此页面来自的方向。如果加载新页面，它将是next如果返回到此页面，或者previous如果此页面替换了当前活动的页面。currentpage.to
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 哈希
  • 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);
}
改进此文档
在本页上