查看 Svelte 组件

视图 - 是应用程序的一个独立的可视部分，具有自己的设置、导航和历史记录。每个视图还可以具有不同的导航栏和工具栏布局、不同的样式。因此，它类似于应用程序中的应用程序。这种功能使您能够轻松地操作应用程序的各个部分。

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

视图组件

包含以下组件：

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

视图属性

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

视图事件

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

事件	描述
viewInit	视图初始化时触发事件
viewResize	在主细节调整大小 (当 `masterDetailResizable` 启用) 时触发事件
swipeBackMove	在滑动返回移动期间触发事件
swipeBackBeforeChange	当您释放它时，在滑动返回到上一个页面的动画开始前触发事件
swipeBackAfterChange	当您释放它时，在滑动返回到上一个页面的动画完成后触发事件
swipeBackBeforeReset	当您释放它时，在滑动返回到当前页面的动画开始前触发事件
swipeBackAfterReset	当您释放它时，在滑动返回到当前页面的动画完成后触发事件
tabShow	View-Tab 变得可见/活动时触发事件
tabHide	View-Tab 变得不可见/非活动时触发事件

访问视图实例

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

通过调用 .instance() 组件的方法
如果您传递了 name 属性 (例如 "left")，您可以像 f7.views.left 那样访问它
主视图 (使用 main={true} 属性) 始终可以通过 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>

改进此文档

在此页面上

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