查看Vue组件

视图- 是应用的一个独立视觉部分，具有自己的设置、导航和历史记录。每个视图还可以有不同的导航栏和工具栏布局、不同的样式。所以它是一种应用中的应用。这种功能允许您轻松地操作应用的每个部分。

查看Vue组件代表Framework7的视图组件。

视图组件

包含以下组件：

f7-view- 单个视图路由组件
f7-views- 用于多个视图的包装元素，用作标签页

视图属性

属性	类型	默认	描述
<f7-view>属性
init	布尔值	true	自动初始化视图
tab	布尔值		将视图用作标签页
tab-active	布尔值		定义视图-标签页为当前活动的标签页
查看Vue组件也接受所有视图参数. 所有这些都可以通过在`<f7-view>`组件上传递单独的属性
<f7-views>属性
tabs	布尔值		将视图用作标签页包装容器

视图事件

只有在iOS主题中才可用滑动返回相关事件。

事件	描述
view:init	事件将在视图初始化时触发
view:resize	事件将在主从视图调整大小时触发（当`masterDetailResizable`启用）
swipeback:move	事件在滑动返回移动期间触发
swipeback:beforechange	事件在您释放它时，在滑动返回动画到前一页之前触发
swipeback:afterchange	事件在您释放它时，在滑动返回动画到前一页之后触发
swipeback:beforereset	事件在您释放它时，在滑动返回动画到当前页之前触发
swipeback:afterreset	事件在您释放它时，在滑动返回动画到当前页之后触发
tab:show	事件在视图-标签页变为可见/活动时触发
tab:hide	事件在视图-标签页变为不可见/非活动时触发

访问视图实例

如果您使用自动初始化来初始化视图（例如使用init:true属性），并且需要使用视图API（如路由）），您可以访问其初始化的实例：

如果您传递了name属性（例如“left”），您可以像f7.views.left
主视图（使用main="true"属性）总是可以通过f7.views.main

示例

最小布局

<f7-view main>
  ...
</f7-view>

<!-- Renders to: -->

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

视图作为标签页

<f7-app>
  ...
  <f7-views tabs>
    <f7-view id="tab-1" main tab tab-active>...</f7-view>
    <f7-view id="tab-2" tab>...</f7-view>
  </f7-views>
  ...
</f7-app>

<!-- Renders to: -->
<div class="framework7-root">
  <div class="views tabs">
    <div class="view view-main tab tab-active" id="tab-1">...</div>
    <div class="view tab" id="tab-2">...</div>
  </div>
</div>

使用参数

<f7-view
  url="/home/"
  :animate="false"
  :ios-dynamic-navbar="false"
  :browser-history="true"
>
  ...
</f7-view>

改进此文档

在本页上

视图组件
视图属性
视图事件
访问视图实例
示例