Page

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

Page Layout

<div class="page" data-name="home">
  <div class="page-content">
    ... 可滚动的页面内容放在这里 ...
  </div>
</div>

Page Name

正如您可能注意到的，每个页面都有一个带有唯一页面名称的data-name属性。这不是必需的，但在“页面事件”或“页面回调”中可能会有用。它可以帮助我们定义加载和可用的页面，以便您可以对页面进行所需的操作。.

Page Content

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

Page Events

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

事件对象target描述
page:mountedPage Element<div class="page">当新页面插入到DOM中时触发的事件。或者当具有keepAlive路由的页面被挂载/附加到DOM中时触发
page:initPage Element<div class="page">在Framework7初始化所需页面组件和导航栏之后触发的事件。
page:reinitPage Element<div class="page">导航到已经初始化的页面时触发的事件。
page:beforeinPage Element<div class="page">在一切都初始化完成并且页面准备好过渡到视图中（到活动/当前位置）时触发的事件。
page:afterinPage Element<div class="page">在页面过渡到视图后触发的事件
page:beforeoutPage Element<div class="page">在页面即将过渡出视图之前触发的事件
page:afteroutPage Element<div class="page">在页面过渡出视图后触发的事件。
page:beforeunmountPage Element<div class="page">当具有keepAlive路由的页面即将从DOM中卸载/分离时触发的事件。
page:beforeremovePage Element<div class="page">在页面将从DOM中移除之前触发的事件。如果您需要解除一些事件/销毁一些插件以释放内存，这个事件非常有用。对于keepAlive路由，不会触发此事件。
page:tabshowPage Element<div class="page">当页面的父级作为选项卡的视图变为可见时触发的事件。
page:tabhidePage Element<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
})

Page Loading Sequence Classes

当新页面加载并过渡到视图（应用程序的主要可见部分）时，页面元素上会有不同的类。

当我们加载/打开新页面时，会发生以下情况：

  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中删除。

Page Data

如您所见，这很简单，但是当我们只使用一个处理程序时，如何确定加载了哪个页面呢？对于这种情况，我们在事件详细信息中有页面数据：

// 在页面事件中:
$$(document).on('page:init', function (e) {
  // 页面数据包含有关加载和初始化页面的所有必需信息
  var page = e.detail;
})

或者，如果使用Dom7分配事件处理程序，就像上面的示例一样，它将作为第二个参数传递：

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

现在，在上面的示例中，我们在page变量中有页面数据。它是一个具有以下属性的对象：

page.appobject已初始化的应用程序实例
page.viewobject包含此页面的视图实例（如果已初始化此视图）
page.routerobject包含此页面的路由器实例（如果已初始化此视图）。与page.view.router相同
page.namestring页面的data-name属性的值
page.elHTMLElement页面元素
page.$elobject带有页面元素的Dom7实例
page.fromstring过渡之前的页面位置或此页面来自的方向。如果加载新页面，则为next；如果返回到此页面，则为previous；如果此页面替换当前活动页面，则为current。
page.tostring新页面的位置或此页面前往的位置。可以是next、previous或current
page.positionstringpage.from的别名
page.directionstring页面过渡的方向（如果适用）。可以是forward或backward
page.routeobject与此页面关联的路由，包含用于加载此页面的当前路由数据的对象。它具有以下属性：
  • url - route URL
  • path - route 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 - route name
  • hash - route URL hash
  • route - 可用路由中匹配的路由对象
  • context - 传递给路由的上下文
page.pageFromobject当前活动页面在加载此新页面之前的页面数据。

Access To Page Data

如果您不使用页面事件/回调，并且需要访问页面数据，可以通过其HTMLElement上的f7Page属性进行访问：

var $$ = Dom7;

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

// do something with page data

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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);
}
← 通知
面板/边框面板 →
Improve this Doc
On this page