查看 Vue 组件

视图 - 是一款与应用相分离的可视化部分，它具有自身的设置、导航和历史记录。每个视图还可以具有不同的导航栏和工具栏布局，不同的样式。因而它就像这款应用中的另一款应用。这样的功能允许你轻松地操作你应用的每个部分。

Vue View 组件表示 Framework7 的 View 组件。

View 组件

以下为包含的组件

f7-view - 单一 View-router 组件
f7-views - 包裹元素，用于被用作选项卡的多视图

查看属性

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

视图事件

向后滑动相关事件仅在 iOS 主题中可用。

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

访问视图实例

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

如果你已经传递了名称属性（例如，“left”），则可以像f7.views.left一样访问它
始终可以通过f7.views.main访问主视图（具有属性main="true"）

示例

最小布局

<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>

改进此文档

此页面

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