查看React组件

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

View React组件代表Framework7的视图组件。

视图组件

包含以下组件：

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

视图属性

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

视图事件

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

事件	描述
viewInit	事件将在视图初始化时触发
viewResize	事件将在主从视图调整大小时触发（当`masterDetailResizable`启用）
swipeBackMove	事件在滑动返回移动期间触发
swipeBackBeforeChange	事件在您释放它时，在滑动返回动画到前一页之前触发
swipeBackAfterChange	事件在您释放它时，在滑动返回动画到前一页之后触发
swipeBackBeforeReset	事件在您释放它时，在滑动返回动画到当前页之前触发
swipeBackAfterReset	事件在您释放它时，在滑动返回动画到当前页之后触发
tabShow	事件在视图-标签页变为可见/活动时触发
tabHide	事件在视图-标签页变为不可见/非活动时触发

访问视图实例

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

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

示例

最小布局

<View main>
  ...
</View>

{/* Renders to: */}

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

视图作为标签页

<App>
  ...
  <Views tabs>
    <View id="tab-1" main tab tabActive>...</View>
    <View id="tab-2" tab>...</View>
  </Views>
  ...
</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>

使用参数

<View
  url="/home/"
  animate={false}
  iosDynamicNavbar={false}
  browserHistory={true}
>
  ...
</View>

改进此文档

在本页上

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