檢視 Svelte 元件

檢視 - 是應用程式中獨立的視覺部分，擁有自己的設定、導覽和歷史記錄。每個檢視也可能具有不同的導覽列和工具列配置、不同的樣式。因此，它是一種應用程式中的應用程式。這種功能允許您輕鬆地操作應用程式的每個部分。

檢視 Svelte 元件代表 Framework7 的檢視元件。

檢視元件

包含以下元件

檢視 - 單一檢視路由器元件
檢視 - 用於作為標籤的多個檢視的包裝元素

檢視屬性

屬性	類型	預設值	說明
<View> 屬性
init	布林值	true	自動初始化 View
tab	布林值		將 View 作為 Tab 使用
tabActive	布林值		定義 View-Tab 為目前活動的 Tab
View Svelte 元件也接受所有 View 參數。所有參數都可以透過 `<View>` 元件上的獨立屬性傳遞
<Views> 屬性
tabs	布林值		將 Views 作為 Tab 包裝器容器使用

View 事件

僅在 iOS 主題中提供與滑動返回相關的事件。

事件	說明
viewInit	事件將在 View 初始化時觸發
viewResize	事件將在主從視圖調整大小時觸發（當啟用 `masterDetailResizable` 時）
swipeBackMove	事件將在滑動返回移動期間觸發
swipeBackBeforeChange	當您釋放時，事件將在滑動返回到前一頁的動畫之前觸發
swipeBackAfterChange	當您釋放時，事件將在滑動返回到前一頁的動畫之後觸發
swipeBackBeforeReset	當您釋放時，事件將在滑動返回到當前頁面的動畫之前觸發
swipeBackAfterReset	當您釋放時，事件將在滑動返回到當前頁面的動畫之後觸發
tabShow	當 View-Tab 變為可見/活動時，將觸發事件
tabHide	當 View-Tab 變為不可見/非活動時，將觸發事件

存取 View 實例

如果您使用自動初始化來初始化 View（使用 init={true} 屬性），並且需要使用 View 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>

改善此文件

在此頁面上

檢視元件
檢視屬性
View 事件
存取 View 實例
範例