Vueコンポーネントの表示

View - は、独自の設定、ナビゲーション、履歴を持つアプリの独立した視覚的な部分です。各ビューは、異なるナビバーとツールバーのレイアウト、異なるスタイルを持つこともできます。つまり、アプリの中のアプリのようなものです。このような機能により、アプリの各部分を簡単に操作できます。

View Vueコンポーネントは、Framework7のViewコンポーネントを表します。

Viewコンポーネント

次のコンポーネントが含まれています。

f7-view - 単一のView-routerコンポーネント
f7-views - タブとして使用される複数のビューのラッパー要素

Viewのプロパティ

プロパティ	型	デフォルト	説明
<f7-view> のプロパティ
init	boolean	true	ビューを自動的に初期化します
tab	boolean		ビューをタブとして使用します
tab-active	boolean		View-Tabを現在アクティブなタブとして定義します
View Vueコンポーネントは、すべてのViewパラメーターも受け入れます。それらはすべて、`<f7-view>`コンポーネントの個別のプロパティとして渡すことができます
<f7-views> のプロパティ
tabs	boolean		ビューをタブラッパーコンテナとして使用します

Viewイベント

スワイプバック関連のイベントは、iOSテーマでのみ利用可能です。

イベント	説明
view:init	ビューの初期化時にイベントがトリガーされます
view:resize	(`masterDetailResizable`が有効な場合に)マスターディテールのサイズ変更時にイベントがトリガーされます
swipeback:move	スワイプバック中にイベントがトリガーされます
swipeback:beforechange	リリース時に前のページへのスワイプバックアニメーションの直前にイベントがトリガーされます
swipeback:afterchange	リリース時に前のページへのスワイプバックアニメーション後にイベントがトリガーされます
swipeback:beforereset	リリース時に現在のページへのスワイプバックアニメーションの直前にイベントがトリガーされます
swipeback:afterreset	リリース時に現在のページへのスワイプバックアニメーション後にイベントがトリガーされます
tab:show	View-Tabが可視/アクティブになるとイベントがトリガーされます
tab:hide	View-Tabが非可視/非アクティブになるとイベントがトリガーされます

Viewインスタンスへのアクセス

ビューを初期化するために自動初期化を使用している場合(init:trueプロパティを使用)、およびView API (ルーターなど)を使用する必要がある場合は、初期化されたインスタンスにアクセスできます。

nameプロパティ(例: "left")を渡した場合は、f7.views.leftのようにアクセスできます。
メインビュー(main="true"プロパティを持つ)は、常にf7.views.mainを介してアクセスできます。

例

最小レイアウト

<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コンポーネント
Viewのプロパティ
Viewイベント
Viewインスタンスへのアクセス
例