logo_applelogo_android
sun_max_fillmoon_fill

视图 / 路由

视图(<div class="view">) - 是应用的一个独立的视觉部分，具有自己的设置、导航和历史记录。所以它是一种应用中的应用。这种功能允许您轻松地操作应用的每个部分。

视图布局

让我们看看查看的 HTML 结构：

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Your main view -->
    <div class="view view-main">
      <!-- View related pages -->
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

如您所见视图可以位于应用的几乎任何部分。

主查看

您的主查看应该有额外的view-main类。为什么我们需要主查看？默认情况下，所有链接（不在任何初始化的查看中）将加载主查看中的页面。另外，如果您使用browserHistory哈希导航，则它只对主查看的导航有效。

多视图布局

在我们有应用根目录中有多个查看的情况下，即所谓的“标签式查看”应用，我们必须用额外的<div class="views">元素。

包裹我们的查看。仅允许一个“查看”元素！

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Views container -->
    <div class="views tabs">
      <!-- Your main view -->
      <div class="view view-main tab tab-active" id="view-1">
        <!-- View related pages -->
        ...
      </div>
      <!-- Another view -->
      <div class="view tab" id="view-2">
        <!-- View related pages -->
        ...
      </div>
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

视图应用方法

当我们已经有了 HTML 中的所需查看并且我们的应用已经初始化时，我们现在需要初始化我们的查看。让我们看看可用于处理查看的可用应用方法：

app.views.create(viewEl, 参数)- 初始化查看

  • viewEl - 字符串或HTMLElement如果是字符串 - 查看元素的 CSS 选择器
  • 参数 - 对象如果是对象 - 查看参数
  • 该方法返回一个包含刚刚创建的查看实例的对象。

app.views.get(viewEl)- 通过 HTML 元素获取查看实例

  • viewEl - 字符串或HTMLElement如果是字符串 - 查看元素的 CSS 选择器
  • 该方法返回一个包含刚刚创建的查看实例的对象。

可能会出现需要获取当前活动查看的情况，因为除了主应用查看外，我们可能还有在打开的弹出窗口、弹出框、打开的面板、标签等中的查看。此方法允许获取当前活动/可见/“最顶部”查看的查看实例。

例如，如果您在面板中初始化了查看，并且面板当前是打开的，则此方法将返回面板的查看。或者，如果您使用带有标签栏布局的应用，其中每个标签都是查看，则此方法将返回当前活动/可见的标签查看

app.views.current- 获取当前活动/可见查看实例。

  • 该方法返回一个包含刚刚创建的查看实例的对象。

视图参数

现在让我们看看需要创建查看的可用参数列表：

参数类型默认描述
name字符串查看的名称。如果查看被命名创建，则可以通过app.views.[name]
main布尔值false指定此查看是否为主查看。如果没有传递，则将根据其元素是否具有view-main类来决定
路由器布尔值true设置为 false 以禁用查看路由器
initRouterOnTabShow布尔值false如果启用并且查看是标签，则它不会初始化路由器并加载初始页面，直到查看标签变为可见
url字符串默认（初始）查看的 URL。如果没有指定，则等于文档 URL
loadInitialPage布尔值true当启用时，并且查看中没有子页面时。它将加载与初始 URL 匹配的初始页面
linksView字符串
对象		另一个查看的 CSS 选择器或初始化的查看实例对象。默认情况下，所有在初始化（仅）查看中的链接将加载此查看中的页面。这告诉链接在其他查看中加载页面。
allowDuplicateUrls布尔值false您可以启用此参数以允许加载具有与当前“活动”页面相同的 URL 的新页面。
animate布尔值true启用页面之间的过渡
preloadPreviousPage布尔值true启用/禁用在导航深入时预加载上一页。对于“滑动返回页面”功能的正确工作应启用此功能。
reloadPages布尔值false当启用时，查看将始终重新加载当前活动页面，而不会加载新页面
restoreScrollTopOnBack布尔值true当启用时，它将在您返回到此页面时恢复页面滚动顶部
iosPageLoadDelay数字0新页面将被加载并插入到 DOM 中，并且在它将被过渡之前经过的延迟（以毫秒为单位）。可以稍微增加以提高性能。仅在 iOS 主题下有效
mdPageLoadDelay数字0新页面将被加载并插入到 DOM 中，并且在它将被过渡之前经过的延迟（以毫秒为单位）。可以稍微增加以提高性能。仅在 MD 主题下有效
passRouteQueryToRequest布尔值true当启用时，路由器将路由 URL 查询传递给请求 URL 查询（对于url和componentUrl 路由属性)

如果您有如下路由：

{ path: '/somepage/', url: 'http://myserver/page/' }

并且您将点击具有/somepage/?foo=barURL 的链接，则它将加载来自http://myserver/page/?foo=barurl

passRouteParamsToRequest布尔值false当启用时，路由器将当前路由参数传递给请求 URL 查询（对于url和componentUrl 路由属性)

如果您有如下路由：

{ path: '/user/:userId/posts/:postId/', url: 'http://myserver/userpost/' }

并且您将点击具有/user/11/posts/12/URL 的链接，则它将加载来自http://myserver/userpost/?userId=11&postId=12url

主从
masterDetailBreakpoint数字0启用主详细信息视图的最小应用宽度（用于主路由，即具有master: true参数中）
masterDetailResizable布尔值false

启用可调整大小的主详细信息布局

要指定主详细信息可调整大小的最小/最大宽度，需要在样式中的 page-master 上设置，例如：

.view-master-detail .page-master {
  min-width: 200px;
  max-width: 80vw;
}
reloadDetail布尔值false当启用时，它将在导航时重新加载每个详细信息页面
路由
路由数组当前查看的数组路由。如果指定，则将覆盖全局应用路由，并且仅在此处指定的路由对当前查看可用
routesAdd数组将要扩展全局应用路由的附加路由数组。这些附加路由仅对当前查看可用
routesBeforeEnterfunction(context)

数组		将在每次之前执行的函数（或函数数组）每个路由卸载/离开。要继续导航 route load/enter. To proceed route loading resolve必须被调用。如果是array然后，数组中的每个函数都必须解析才能继续。

与在路由之前进入但将对每个路由有效

路由之前离开function(context)

数组		将在每次之前执行的函数（或函数数组）每个路由卸载/离开。要继续导航 route unload/leave. To proceed navigation resolve必须被调用。如果是array然后，数组中的每个函数都必须解析才能继续。

与路由之前离开但将对每个路由有效

元素移除
removeElements布尔值true在页面过渡期间，路由器可能会从DOM中移除未使用的页面和导航栏元素。在您想手动处理元素移除或使用其他库（例如Vue或React）的情况下，禁用此功能很有用
removeElementsWithTimeout布尔值false当启用时，路由器将在超时后移除元素
removeElementsTimeout数字0移除元素的超时时间（如果removeElementsWithTimeout: true)
unloadTabContent布尔值true当选项卡可见时，卸载路由选项卡内容（移除选项卡内部内容）。仅适用于路由选项卡
组件缓存
componentCache布尔值true当启用时，路由器将缓存通过componentUrl
XHR缓存
xhrCache布尔值true由于路由器可以使用Ajax加载页面内容，因此使用缓存是很好的，特别是如果这些页面中的内容更新不太频繁。
xhrCacheIgnore数组[]应该不缓存的URL（字符串）数组
xhrCacheIgnoreGetParameters布尔值false如果为"true"，则像"about.html?id=2"和"about.html?id=3"这样的URL将被视为单个"about.html"页面并缓存
xhrCacheDuration数字1000 * 60 * 10应用程序将使用缓存而不是使用另一个Ajax请求加载页面，持续时间为ms（毫秒）。默认为10分钟。
iOS动态导航栏
iosDynamicNavbar布尔值true为iOS主题启用动态导航栏
iosAnimateNavbarBackIcon布尔值true此选项（当启用时）为动态导航栏左侧的返回链接图标动画提供更原生的外观。仅在您使用动态导航栏并将默认的左侧返回链接图标设置为"滑动"时才有用
滑动返回
iosSwipeBack布尔值true启用/禁用从屏幕左侧边缘滑动以返回上一页的功能。适用于iOS主题
iosSwipeBackThreshold数字0px值。如果"触摸距离"大于此值，则将开始滑动返回操作。适用于iOS主题
iosSwipeBackActiveArea数字30px值。屏幕左侧不可见边缘的宽度，该边缘触发滑动返回操作。适用于iOS主题
iosSwipeBackAnimateShadow布尔值true启用/禁用滑动返回操作期间的框阴影动画。您可以禁用它以提高性能。适用于iOS主题
iosSwipeBackAnimateOpacity布尔值true启用/禁用滑动返回操作期间的透明度动画。您可以禁用它以提高性能。适用于iOS主题
mdSwipeBack布尔值false启用/禁用从屏幕左侧边缘滑动以返回上一页的功能。适用于MD主题
mdSwipeBackThreshold数字0px值。如果"触摸距离"大于此值，则将开始滑动返回操作。适用于MD主题
mdSwipeBackActiveArea数字30px值。屏幕左侧不可见边缘的宽度，该边缘触发滑动返回操作。适用于MD主题
mdSwipeBackAnimateShadow布尔值true启用/禁用滑动返回操作期间的框阴影动画。您可以禁用它以提高性能。适用于MD主题
mdSwipeBackAnimateOpacity布尔值false启用/禁用滑动返回操作期间的透明度动画。您可以禁用它以提高性能。适用于MD主题
浏览器历史记录
browserHistory布尔值false如果您开发的是Web应用程序（不是Cordova/Capacitor或主屏幕Web应用程序），则启用哈希导航（浏览器URL将类似于" http://my-webapp.com/#!/about.html"）很有用。用户还可以使用浏览器的默认后退和前进按钮在应用程序的历史记录中导航。
browserHistoryRoot字符串浏览器历史记录根URL分隔符，例如" http://my-app.com/"。仅在您使用空（""）时才有用browserHistorySeparator
browserHistoryAnimate布尔值true启用/禁用浏览器历史记录更改时的页面过渡
browserHistoryAnimateOnLoad布尔值false启用/禁用应用程序加载时的浏览器历史记录页面过渡
browserHistorySeparator字符串#!浏览器历史记录URL分隔符，可以更改为类似'#page/'的内容，然后您的浏览器历史记录URL将类似于" http://myapp.com/#page/about.html"
browserHistoryOnLoad布尔值true禁用以忽略应用程序加载时解析浏览器历史记录URL并加载页面
browserHistoryInitialMatch布尔值falseSet totrue当您的服务器配置为响应与请求的URL匹配的内容时（例如，使用服务器端渲染框架，如Nuxt.js、Next.js和其他）。在用于Framework7-React/Vue/Svelte时也必须启用。默认禁用
browserHistoryStoreHistory布尔值true当启用时（默认情况下），它将路由器历史记录存储在localStorage中，并在下次访问Web应用程序时尝试恢复它
browserHistoryTabs字符串替换可以是replace或push. 当"替换"（默认情况下），它将在路由选项卡更改时替换状态，否则（如果"推入"），它将向历史记录添加每个路由选项卡更改，因此将可以使用浏览器后退按钮在选项卡之间切换
事件处理程序
on对象

带有事件处理程序的对象。例如：

var view = app.views.create('.view-main', {
  on: {
    pageInit: function () {
      console.log('page init')
    }
  }
})

注意，所有以下参数都可以在view设置所有视图的默认值的属性。例如：

var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
    xhrCache: false,
  }
});

视图方法和属性

因此，要创建视图，我们必须调用：

var view = app.views.create({ /* parameters */ })

之后我们就有其初始化的实例（如view示例中上面的变量）以及有用的方法和属性：

属性
view.app链接到全局应用实例
view.el视图HTML元素
view.$el具有视图HTML元素的Dom7实例
view.name传递的视图名称nameparameter
view.main指示是否为主视图的布尔属性
view.routes包含可用路由的数组
view.history包含视图历史的数组
view.params包含视图初始化参数的对象
view.router视图初始化的路由器实例
方法
视图销毁销毁视图实例
视图.on(事件上触发, 处理程序)添加事件处理程序
视图.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
视图.off(事件上触发, 处理程序)移除事件处理程序
视图.off(事件上触发)移除指定事件的所有处理程序
视图.emit(事件上触发, ...args)在实例上触发事件

视图事件

视图将在视图元素上触发以下DOM事件，并在应用和视图实例上触发事件：

视图DOM事件

事件Target描述
view:init视图元素<div class="view">事件将在视图初始化时触发
view:resize视图元素<div class="view">事件将在主从视图调整大小时触发（当masterDetailResizable启用）

视图实例事件

视图实例在自身实例和应用实例上触发事件。应用实例事件名称前缀为view.

事件Target参数描述
initview(视图)事件将在视图初始化时触发
viewInitapp
resizeview(视图, 宽度)事件将在主从视图调整大小时触发（当masterDetailResizable启用）
viewResizeapp

路由器API / 方法与属性

视图的主要目的是在页面之间进行导航/路由。我们可以通过view.router. 它有很多有用的方法和属性来控制路由和导航：

路由属性
router.app链接到全局应用实例
router.view链接到相关的视图实例
router.params包含路由初始化参数的对象
router.el路由的视图HTML元素
router.$el包含路由视图HTML元素的Dom7实例
router.currentPageEl当前页面的HTML元素
router.routes包含可用路由的数组
router.history包含视图路由历史的数组
router.cache包含路由/视图缓存数据的对象
router.currentRoute包含当前路由数据的对象。它具有以下属性
  • 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- 传递给路由的上下文
router.previousRoute包含先前活动路由数据的对象。与currentRoute
router.allowPageChange布尔属性指示是否允许更改页面/导航
路由方法
router.navigate(url, options)导航到（加载）新页面
  • url - 字符串- 导航到的URL
  • 选项 - 对象使用附加导航属性（可选）：
    • reloadCurrent (布尔值) - 用路由中的新页面替换当前页面，此情况下无动画
    • reloadPrevious (布尔值) - 用路由中的新页面替换历史中的上一个页面
    • reloadAll (布尔值) - 加载新页面并从历史和DOM中删除所有以前的页面
    • clearPreviousHistory (布尔值) - 重新加载/导航到指定路由后清除上一个页面历史
    • animate (布尔值) - 页面是否应该有动画（覆盖默认路由设置）
    • history (布尔值) - 页面是否应该保存到路由历史
    • browserHistory (布尔值) - 页面是否应该保存到浏览器状态。如果你使用browserHistory，则可以在这里传递false以防止路由进入浏览器历史
    • ignoreCache (布尔值) - 如果设置为true，则它将忽略缓存中的此类 URL，并再次使用 XHR 重新加载它
    • props (对象) - 传递给页面组件属性的props
    • transition (字符串) - 路由自定义页面过渡名称
    • openIn (字符串) - 允许将页面路由作为模态或面板打开。因此它可以有以下几种：popup, popover, loginScreen, sheet, panel
router.navigate(参数，选项)通过参数导航到（加载）新页面。此方法允许通过其name.
  • 参数 - 对象- 路由对象name, query, params导航到。
  • 选项 - 对象使用附加导航属性（可选）。与前面的示例相同。

例如，如果我们有以下路由：

{
  name: 'about',
  path: '/about/',
  ...
}

我们可以通过调用：

router.navigate({ name: 'about' });

如果有更复杂的路由带参数：

{
  name: 'post',
  path: '/block/:userId/:postId',
  ...
}

那么必须传递参数：

router.navigate({
  name: 'post',
  params: { userId: 1, postId: 2 },
});
router.back(url, options)返回到上一个页面，在视图历史中向后导航
  • url - 字符串- 导航到的URL（可选）。
    • 如果未指定，则将返回历史中的上一个页面。
    • 如果指定且历史中有上一个页面，则将被忽略。
    • 如果指定且存在force: true选项，则将删除上一个页面并导航回指定的页面URL
  • 选项 - 对象使用附加导航属性（可选）：
    • animate (布尔值) - 页面是否应该有动画（覆盖默认路由设置）
    • browserHistory (布尔值) - 页面是否应该保存到浏览器状态。如果你使用browserHistory，则可以在这里传递false以防止路由进入浏览器历史
    • ignoreCache (布尔值) - 如果设置为true，则它将忽略缓存中的此类 URL，并再次使用 XHR 重新加载它
    • force (布尔值) - 如果设置为true，则它将忽略历史中的上一页，并加载指定的页面
router.refreshPage()刷新/重新加载当前页面。实际上与：
router.navigate(router.currentRoute.url, {
  reloadCurrent: true,
  ignoreCache: true,
});
router.clearPreviousHistory()清除路由上一个页面历史并从DOM中删除所有以前的页面
router.updateCurrentUrl(url)更新当前路由URL，并根据传递的URL更新router.currentRoute属性（查询、参数、哈希等）。此方法不会加载或重新加载任何内容。它只是更改当前路由URL。
router.generateUrl({name, query, 参数})

根据给定的路由名称生成路由URL。例如，如果我们有以下路由：

{
  name: 'blogPost',
  path: '/blog/post/:postId',
  ...
}

那么我们可以这样获取路由的URL：

const url = router.generateUrl({
  name: 'blogPost',
  // only for route with required params
  params: { postId: 1234 },
  // optional query
  query: { foo: 'bar' }
});
console.log(url); /* /blog/post/1234?foo=bar */
router.on(事件上触发, 处理程序)添加事件处理程序
router.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
router.off(事件上触发, 处理程序)移除事件处理程序
router.off(事件上触发)移除指定事件的所有处理程序
router.emit(事件上触发, ...args)在实例上触发事件

页面与视图之间的链接

非常不方便时使用路由方法在页面之间导航。在许多情况下，我们只需使用链接在页面之间导航。我们可以使用data-属性指定所有参数来自动初始化：

<!-- same as router.navigate('/somepage/'); -->
<a href="/somepage/">Some Page</a>

<!-- same as router.navigate('/somepage/', {reloadCurrent: true, animate: false}); -->
<a href="/somepage/" data-animate="false" data-reload-current="true">Some Page</a>

<!-- same as router.back(); -->
<a href="#" class="back">Go back</a>

<!-- same as router.back('/home/', {force: true, ignoreCache: true}); -->
<a href="/home/" data-force="true" data-ignore-cache="true" class="back">Go back</a>

链接默认行为：

但如果我们需要在新视图加载页面，我们可以将此视图的CSS选择器指定在链接的data-view属性

<!-- left view -->
<div class="view view-init view-left" data-name="left">
  ...
  <!-- will load "some-page" to main view -->
  <a href="/some-page/" data-view=".view-main">Some Page</a>
  ...
</div>
<!-- main view -->
<div class="view view-init view-main">
  ...
  <!-- will load "another-page" to left view -->
  <a href="/another-page/" data-view=".view-left">Another Page</a>
  ...
</div>

如果我们需要在“当前”视图（当前活动/可见视图实例）中加载页面，我们需要设置data-view="current"属性：

<!-- will load "another-page" in current view -->
<a href="/another-page/" data-view="current">Another Page</a>

如果我们需要阻止路由处理特定链接，我们可以给这些链接添加prevent-router类：

<!-- This link will be ignored by router -->
<a href="/some-page/" class="prevent-router">Some Page</a>

路由器事件

路由有很多有用的事件。

路由器DOM事件

路由将为滑动返回页面触发以下DOM事件：

事件Target描述
swipeback:move视图元素<div class="view">事件在滑动返回移动期间触发
swipeback:beforechange视图元素<div class="view">事件在您释放它时，在滑动返回动画到前一页之前触发
swipeback:afterchange视图元素<div class="view">事件在您释放它时，在滑动返回动画到前一页之后触发
swipeback:beforereset视图元素<div class="view">事件在您释放它时，在滑动返回动画到当前页之前触发
swipeback:afterreset视图元素<div class="view">事件在您释放它时，在滑动返回动画到当前页之后触发

路由器实例事件

路由事件冒泡到视图实例和到应用实例，因此路由实例上触发的事件也将可在视图和应用实例上获取：

事件参数描述
routeChange(新路由, 旧路由, 路由器)当前路由更改时将触发事件
路由已更改(新路由, 旧路由, 路由器)当当前路由更改和页面过渡时将触发事件
路由URL更新(新路由, 路由器)当调用方法时将触发事件router.updateCurrentUrlXHR事件
XHR Events
路由XHR开始(xhr, 选项)在路由XHR打开后和发送前将触发事件。可用于在发送前修改XHR对象。使用此回调来设置自定义头部等。作为参数接收XHR对象和导航options对象
路由XHR成功(xhr, 选项)在请求成功时将触发事件。作为参数接收XHR对象和导航options对象
路由XHR错误(xhr, 选项)如果请求失败将触发事件。作为参数接收XHR对象和导航options对象
路由XHR完成(xhr, 选项)在请求完成时将触发事件。作为参数接收XHR对象和导航options对象
滑动返回事件
滑动返回移动(数据)在滑动返回移动期间将触发事件。data包含以下属性的对象:percentage, currentPageEl, previousPageEl, currentNavbarEl, previousNavbarEl
滑动返回更改前(数据)在释放时将触发滑动返回动画到前一页的事件。data包含以下属性的对象:currentPageEl, previousPageEl, currentNavbarEl, previousNavbarEl
滑动返回更改后(数据)在释放时将触发滑动返回动画到前一页的事件。data包含以下属性的对象:currentPageEl, previousPageEl, currentNavbarEl, previousNavbarEl
滑动返回重置前(数据)在释放时将触发滑动返回动画到当前页的事件。data包含以下属性的对象:currentPageEl, previousPageEl, currentNavbarEl, previousNavbarEl
滑动返回重置后(数据)在释放时将触发滑动返回动画到当前页的事件。data包含以下属性的对象:currentPageEl, previousPageEl, currentNavbarEl, previousNavbarEl
页面事件
pageMounted(页面数据)当新页面刚刚插入到DOM时，将触发事件。或者当具有keepAlive路由被挂载/附加到DOM。作为参数事件接收页面数据
pageInit(页面数据)在Router初始化所需页面的组件和导航栏后触发事件。作为参数事件接收页面数据
pageReinit(页面数据)在导航到已初始化的页面时将触发此事件。作为参数事件接收页面数据
pageBeforeIn(页面数据)在所有初始化完成且页面准备好过渡到视图（到活动/当前位置）时将触发事件。作为参数事件接收页面数据
pageAfterIn(页面数据)在页面过渡到视图后触发事件。作为参数事件接收页面数据
pageBeforeOut(页面数据)在页面即将过渡出视图前触发事件。作为参数事件接收页面数据
pageAfterOut(页面数据)在页面过渡出视图后触发事件。作为参数事件接收页面数据
pageBeforeUnmount(页面数据)当具有keepAlive路由即将被卸载/从DOM中分离。作为参数事件接收页面数据
pageBeforeRemove(页面数据)在页面将从DOM中移除前触发事件。此事件如果需要分离某些事件/销毁某些插件释放内存会非常有用。作为参数事件接收页面数据. 此事件不会为keepAlive路由触发。
可路由标签事件
tabInit
tabMounted		(newTabEl, tabRoute)可在可路由的 Tab 内容加载后触发事件。作为参数，事件处理程序接收：
  • newTabEl- 刚刚加载路由内容的 tab HTML 元素（新标签）
  • tabRoute- 新标签路由
tabBeforeRemove(oldTabEl, newTabEl, tabRoute)可在可路由的 Tab 内容加载后触发事件。作为参数，事件处理程序接收：
  • oldTabEl- 刚刚移除路由内容的 tab HTML 元素（旧标签）
  • newTabEl- 刚刚加载路由内容的 tab HTML 元素（新标签）
  • tabRoute- 新标签路由
可路由模态事件
模态初始化
模态挂载		(模态El, 模态路由, 模态)在可路由模态内容加载并添加到DOM后触发事件。作为参数事件处理器接收:
  • modalEl- 加载的模态HTML元素
  • modalRoute- 模态路由
  • modal- 创建的模态实例
模态移除前(模态El, 模态路由, 模态)在可路由模态将从DOM中移除并销毁前触发事件。作为参数事件处理器接收:
  • modalEl- 模态HTML元素
  • modalRoute- 模态路由
  • modal- 模态实例

视图自动初始化

如果你不需要使用View API并且你的View在应用初始化时位于DOM中，那么只需添加额外的view-init class:

<!-- Add view-init class -->
<div class="view view-init">
  ...
</div>

但视图参数呢。在这种情况下，我们可以将它们传递在data-属性中。

camelCase中使用的参数，例如browserHistory，在data-属性中应使用kebab-case作为data-browser-history

<!-- view parameters in data- attributes -->
<div class="view view-init" data-url="/" data-name="home" data-browser-history="true">
  ...
</div>

在这种情况下，如果你需要访问创建的View实例，你可以使用:

<!-- main view -->
<div class="view view-main view-init">
  ...
</div>

<!-- another view -->
<div class="view view-init" data-name="home">
  ...
</div>
var mainView = app.views.main;
var homeView = app.views.home;

初始页面路由

初始页面也可以使用路由正确加载。在应用布局中我们必须将View留空：

<body>
  <div id="app">
    <div class="view view-main"></div>
  </div>
</body>

在路由中，我们可以指定“home”路由，例如：

routes: [
  {
    path: '/',
    url: './home.html'
  },
  ...
]

而在初始化View时，我们需要指定它是默认URL：

app.views.create('.view-main', {
  url: '/'
})

这样，现在在应用加载时，将加载“home.html”文件中的主页内容。

主从

主-详情模式通常用于足够宽的屏幕和平板电脑，并由两个视图组成：

当收起（在小屏幕上）时，在这种页面之间的导航将像普通路由一样进行。

到/从主-详情视图的导航不会发生过渡。

当主页面加载时，所有其他页面都将作为详情页面加载。要“退出”主-详情视图，建议使用reloadAll导航参数。

要启用主-详情：

当主-详情启用时，你可以使用以下附加类进行自定义样式：

例如：

const mainView = app.views.create('.view-main', {
  // enable master detail
  masterDetailBreakpoint: 800,
  routes: [
    {
      path: '/',
      url: './pages/master.html',
      // specify home route as master route
      master: true,
      // detail routes
      detailRoutes: [
        {
          path: '/detail/:id/',
          url: './pages/detail.html',
        },
      ]
    },
  ]
});

我们应该有如下内容：

自定义页面过渡

除了默认的主题特定页面过渡外，还可以创建自定义页面过渡或使用附加的过渡效果。

内置了以下附加自定义页面过渡：

  • f7-circle
  • f7-cover
  • f7-cover-v
  • f7-dive
  • f7-fade
  • f7-flip
  • f7-parallax
  • f7-push

要在特定路由上使用此类过渡，我们需要在路由选项中指定它:

routes = [
  ...
  {
    path: '/some-page/',
    url: '...',
    options: {
      transition: 'f7-circle',
    },
  },
  ...
]

要使用自定义过渡加载现有路由，我们需要将其传递在router.navigate()方法：

// load /some-page/ with "f7-cover" transition
router.navigate('/some-page/', { transition: 'f7-cover' })

或者我们可以直接通过data-transition属性指定它（像指定任何其他路由选项一样）：

<!-- load /some-page/ with "f7-cover" transition -->
<a href="/some-page/" data-transition="f7-cover">...</a>

除了内置的过渡外，我们还可以创建自定义的过渡。这可以通过CSS动画来完成。

当我们指定自定义页面过渡时，路由器会向其元素添加以下类（<div class="view">）访问：

  • router-transition-[name]-forward- 当导航到新页面时
  • router-transition-[name]-backward- 当导航到上一页（返回时）

并且它在导航前进时等待animationend事件在page-next上，在导航返回时等待page-current上。

所以如果我们将我们的自定义过渡命名为my-transition，那么它可以用以下方式指定：

.router-transition-my-transition-forward,
.router-transition-my-transition-backward {
  /* Apply some styles for view element when custom transition is running */
}
.router-transition-my-transition-forward .page-current {
  /* Animation when current page transforms to previous page */
  animation: my-transition-current-to-prev 400ms;
}
.router-transition-my-transition-forward .page-next {
  /* Animation when next page transforms to current page (new page comes into view) */
  animation: my-transition-next-to-current 400ms;
}
.router-transition-my-transition-backward .page-current {
  /* Animation when current page transforms to next page (going back) */
  animation: my-transition-current-to-next 400ms;
}
.router-transition-my-transition-backward .page-previous {
  /* Animation when previous page transforms to current page (previous page comes into view) */
  animation: my-transition-prev-to-current 400ms;
}

/* Specify animations */
@keyframes my-transition-current-to-prev {
  /* ... */
}
@keyframes my-transition-next-to-current {
  /* ... */
}
@keyframes my-transition-current-to-next {
  /* ... */
}
@keyframes my-transition-prev-to-current {
  /* ... */
}

这里有一个内置f7-cover过渡指定的示例：

.router-transition-f7-cover-forward,
.router-transition-f7-cover-backward {
  background: #000;
  perspective: 1200px;
}
.router-transition-f7-cover-forward .page-next {
  animation: f7-cover-next-to-current 450ms forwards;
}
.router-transition-f7-cover-forward .page-current {
  animation: f7-cover-current-to-prev 450ms forwards;
}
.router-transition-f7-cover-backward .page-current {
  animation: f7-cover-current-to-next 450ms forwards;
}
.router-transition-f7-cover-backward .page-previous {
  animation: f7-cover-prev-to-current 450ms forwards;
}
@keyframes f7-cover-next-to-current {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-cover-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-cover-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
}
@keyframes f7-cover-prev-to-current {
  from {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
改进此文档
在本页上