查看 React 组件

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

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

视图组件

以下组件包含在内

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

视图属性

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

视图事件

与滑动返回相关的事件仅在 iOS 主题中可用。

事件	描述
viewInit	在 View 初始化时触发事件
viewResize	在主从调整大小（当 `masterDetailResizable` 启用）时触发事件
swipeBackMove	在滑动返回移动过程中触发事件
swipeBackBeforeChange	当您松开它时，在滑动返回到前一页的动画之前触发事件
swipeBackAfterChange	当您松开它时，在滑动返回到前一页的动画之后触发事件
swipeBackBeforeReset	当您松开它时，在滑动返回到当前页面的动画之前触发事件
swipeBackAfterReset	当您松开它时，在滑动返回到当前页面的动画之后触发事件
tabShow	当 View-Tab 变得可见/活动时触发事件
tabHide	当 View-Tab 变得不可见/非活动时触发事件

访问 View 实例

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

如果您传递了 name 属性（例如“left”），您可以像 this.$f7.views.left 一样访问它
主视图（使用 main={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>

改进此文档

在此页面上

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