ビュー・ビュー・コンポーネント

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

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

    ビューコンポーネント

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

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

    ビューのプロパティ

    PropTypeDefaultDescription
    <f7-view> properties
    initbooleantrueビューを自動的に初期化する
    tabbooleanビューをタブとして使用
    tab-activebooleanView-Tabを現在のアクティブなTabとして定義する
    View Vue component also accepts all View Parameters. All of them can be passed via separate props on <f7-view> component
    <f7-views> properties
    tabsbooleanビューをタブのラッパーコンテナとして使用

    ビューのイベント

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

    EventDescription
    view:initイベントは、ビューの初期化時に発生します。
    view:resizeイベントはマスター詳細のサイズ変更時に発生します (masterDetailResizable が有効な場合)
    swipeback:moveイベントはスワイプバックの移動中に発生します。
    swipeback:beforechangeイベントは、スワイプバックを解除して前のページに戻るアニメーションの直前に発生します。
    swipeback:afterchangeイベントはスワイプバック後に、前のページへのアニメーションをリリースした時に発生します。
    swipeback:beforeresetイベントは、あなたがそれを解放したときに現在のページにスワイプバックアニメーションの直前にトリガされます。
    swipeback:afterresetイベントは、リリースしたときに現在のページにスワイプバックアニメーションの後にトリガされます。
    tab:showイベントは View-Tab が表示/アクティブになった時に発生します。
    tab:hideView-Tabが不可視/非アクティブになるとイベントが発生します。

    ビューインスタンスへのアクセス

    自動初期化を使用してビューを初期化し(init:true prop)、ビューAPIを使用する必要がある場合(ルータのように)、初期化されたインスタンスにアクセスすることができます。

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

    最小限のレイアウト

    <f7-view main>
      ...
    </f7-view>
    
    <!-- レンダリングは -->
    
    <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>
    
    <!-- レンダリングされるもの -->
    <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>