スポンサースポンサーになる
logo_applelogo_android
sun_max_fillmoon_fill

ビュー / ルーター

ビュー (<div class="view">) は、独自の settings、navigation、history を持つアプリの独立した視覚的な部分です。そのため、アプリ内アプリのようなものです。このような機能により、アプリの各部分を簡単に操作できます。

ビューレイアウト

ビューのHTML構造を見てみましょう。

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Your main view -->
    <div class="view view-main">
      <!-- View related pages -->
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

ご覧のとおり、ビューはアプリのほぼどこにでも配置できます。

メインビュー

メインビューには、追加のview-mainクラスが必要です。メインビューが必要な理由は何ですか？デフォルトでは、（初期化されたビュー内にない）すべてのリンクはメインビューにページを読み込みます。また、browserHistoryハッシュナビゲーションを使用する場合、メインビューのナビゲーションでのみ機能します。

複数のビューレイアウト

アプリのルートに複数のビューを持つアプリ（いわゆる「タブ付きビュー」アプリ）の場合、ビューを追加の<div class="views">要素でラップする必要があります。

「ビュー」要素は1つのみ許可されます！

<body>
  <!-- app root -->
  <div id="app">
    <!-- view inside of panel -->
    <div class="panel panel-left panel-cover">
      <div class="view panel-view"> ... </div>
    </div>
    <!-- Views container -->
    <div class="views tabs">
      <!-- Your main view -->
      <div class="view view-main tab tab-active" id="view-1">
        <!-- View related pages -->
        ...
      </div>
      <!-- Another view -->
      <div class="view tab" id="view-2">
        <!-- View related pages -->
        ...
      </div>
      ...
    </div>
    <div class="popup">
      <div class="view popup-view"> ... </div>
    </div>
  </div>
</body>

ビューアプリメソッド

HTMLに必要なビューが既にあり、アプリが既に初期化されている場合、ビューを初期化する必要があります。ビューを操作するための利用可能なアプリメソッドを見てみましょう。

app.views.create(viewEl, parameters) - ビューの初期化

  • viewEl - 文字列またはHTMLElement。文字列の場合、ビュー要素のCSSセレクター
  • parameters - オブジェクト。ビューのパラメーターを含むオブジェクト
  • メソッドは、作成されたばかりのビューインスタンスを含むオブジェクトを返します。

app.views.get(viewEl) - HTML要素によるビューインスタンスの取得

  • viewEl - 文字列またはHTMLElement。文字列の場合、ビュー要素のCSSセレクター
  • メソッドは、作成されたばかりのビューインスタンスを含むオブジェクトを返します。

メインアプリビューの代わりに、開かれたポップアップ、ポップオーバー、開かれたパネル、タブなどにもビューがあるため、現在アクティブなビューを取得する必要がある場合があります。このメソッドを使用すると、現在アクティブ/表示されている/「最上位」のビューのビューインスタンスを取得できます。

たとえば、パネルにビューを初期化し、パネルが現在開いている場合、このメソッドはパネルのビューを返します。または、各タブがビューであるタブバーレイアウトを持つアプリを使用する場合、このメソッドは現在アクティブ/表示されているタブビューを返します。

app.views.current - 現在アクティブ/表示されているビューインスタンスを取得します。

  • メソッドは、作成されたばかりのビューインスタンスを含むオブジェクトを返します。

ビューパラメーター

では、ビューを作成するために必要なパラメーターのリストを見てみましょう。

パラメーター型デフォルト説明
name文字列ビュー名。名前を付けてビューが作成された場合、app.views.[name]を介してアクセスできます。
mainブール値falseこれがメインビューかどうかを指定します。渡されない場合、その要素にview-mainクラスがあるかどうかによって判断されます。
routerブール値trueビュールーターを無効にする場合はfalseに設定します。
initRouterOnTabShowブール値false有効になっている場合、ビューがタブであり、ビュータブが表示されるまでルーターを初期化して最初のページを読み込みません。
url文字列デフォルト（初期）ビューのURL。指定されていない場合、ドキュメントのURLと同じです。
loadInitialPageブール値true有効になっている場合、ビュー内に子ページがない場合。初期URLに一致する初期ページを読み込みます。
linksView文字列
オブジェクト		別のビューのCSSセレクター、または初期化されたビューインスタンスを持つオブジェクト。デフォルトでは、初期化された（のみ）ビュー内のすべてのリンクは、このビューにページを読み込みます。これは、他のビューにページを読み込むようにリンクに指示します。
allowDuplicateUrlsブール値falseこのパラメーターを有効にして、ビューの現在「アクティブ」なページと同じURLを持つ新しいページの読み込みを許可できます。
animateブール値trueページ間のトランジションを有効にします。
preloadPreviousPageブール値trueナビゲーションで深く進むときに前のページのプリロードを有効/無効にします。「ページを戻るスワイプ」機能の正しい動作には有効にする必要があります。
reloadPagesブール値false有効になっている場合、ビューは常に新しいページを読み込むことなく、現在アクティブなページを常に再読み込みします。
restoreScrollTopOnBackブール値true有効にすると、このページに戻ったときにページのスクロールトップが復元されます。
iosPageLoadDelay数値0新しいページが読み込まれてDOMに挿入され、トランジションされるまでの遅延（ミリ秒）。パフォーマンスを向上させるために少し増やすことができます。iOSテーマでのみ有効になります。
mdPageLoadDelay数値0新しいページが読み込まれてDOMに挿入され、トランジションされるまでの遅延（ミリ秒）。パフォーマンスを向上させるために少し増やすことができます。MDテーマでのみ有効になります。
passRouteQueryToRequestブール値true有効にすると、ルーターはルートURLクエリをリクエストURLクエリに渡します（urlおよびcomponentUrl ルートプロパティの場合）。

次のルートがあるとします。

{ path: '/somepage/', url: 'http://myserver/page/' }

そして、/somepage/?foo=bar URLを持つリンクをクリックすると、http://myserver/page/?foo=bar URLからページを読み込みます。

passRouteParamsToRequestブール値false有効にすると、ルーターは現在のルートパラメーターをリクエストURLクエリに渡します（urlおよびcomponentUrl ルートプロパティの場合）。

次のルートがあるとします。

{ path: '/user/:userId/posts/:postId/', url: 'http://myserver/userpost/' }

そして、/user/11/posts/12/ URLを持つリンクをクリックすると、http://myserver/userpost/?userId=11&postId=12 URLからページを読み込みます。

マスターディテール
masterDetailBreakpoint数値0マスタールート（master: trueパラメーターを持つルート）のマスターディテールビューを有効にするための最小アプリ幅。
masterDetailResizableブール値false

サイズ変更可能なマスターディテールレイアウトを有効にします。

サイズ変更可能なマスターディテールの最小/最大幅を指定するには、スタイルでpage-masterに設定する必要があります。例：

.view-master-detail .page-master {
  min-width: 200px;
  max-width: 80vw;
}
reloadDetailブール値false有効にすると、ナビゲートするたびにすべてのディテールページを再読み込みします。
ルート
routes配列現在のビューのルートを含む配列。指定されている場合、グローバルアプリルートを上書きし、ここで指定されたルートのみが現在のビューで使用可能になります。
routesAdd配列グローバルアプリルートを拡張する追加のルートを含む配列。この追加ルートは、現在のビューでのみ使用できます。
routesBeforeEnterfunction(context)

配列		すべてのルートの読み込み/開始前に実行される関数（または関数の配列）。ルートの読み込みを続行するには、resolveを呼び出す必要があります。配列の場合、続行するには配列内のすべての関数を解決する必要があります。

ルートbeforeEnterと同じですが、すべてのルートで機能します。

routesBeforeLeavefunction(context)

配列		すべてのルートのアンロード/終了前に実行される関数（または関数の配列）。ナビゲーションを続行するには、resolveを呼び出す必要があります。配列の場合、続行するには配列内のすべての関数を解決する必要があります。

ルートbeforeLeaveと同じですが、すべてのルートで機能します。

要素の削除
removeElementsブール値trueページのトランジション中に、ルーターは未使用のページとナビゲーションバーの要素をDOMから削除する場合があります。要素の削除を手動で、またはVueやReactなどの他のライブラリを使用して処理する場合は、無効にすることが役立ちます。
removeElementsWithTimeoutブール値false有効にすると、ルーターはタイムアウト後に要素を削除します。
removeElementsTimeout数値0要素を削除するタイムアウト（removeElementsWithTimeout: trueの場合）。
unloadTabContentブール値trueタブが表示されると、ルーティング可能なタブコンテンツ（タブの内部コンテンツを削除）をアンロードします。ルーティング可能なタブの場合のみ。
コンポーネントキャッシュ
componentCacheブール値true有効にすると、ルーターはcomponentUrlを介して指定されたコンポーネントをキャッシュします。
XHRキャッシュ
xhrCacheブール値trueルーターはページのHTMLコンテンツの読み込みにAjaxを使用できるため、特にそれらのページのコンテンツが頻繁に更新されない場合は、キャッシュを使用することをお勧めします。
xhrCacheIgnore配列[]キャッシュされないURL（文字列）の配列。
xhrCacheIgnoreGetParametersブール値false"true"の場合、「about.html?id=2」と「about.html?id=3」のようなURLは、単一の「about.html」ページとして扱われ、キャッシュされます。
xhrCacheDuration数値1000 * 60 * 10アプリが別のAjaxリクエストでページを読み込む代わりにキャッシュを使用する期間（ミリ秒）。デフォルトでは10分かかります。
iOSダイナミックナビゲーションバー
iosDynamicNavbarブール値trueiOSテーマのダイナミックナビゲーションバーを有効にします。
iosAnimateNavbarBackIconブール値trueこのオプション（有効になっている場合）は、ダイナミックナビゲーションバーの左側の戻るリンクアイコンアニメーションによりネイティブな外観を与えます。デフォルトの戻るリンクアイコンを左側に「スライド」として設定したダイナミックナビゲーションバーを使用する場合にのみ役立ちます。
戻るスワイプ
iosSwipeBackブール値true画面の左端からスワイプして前のページに戻る機能を有効/無効にします。iOSテーマ用
iosSwipeBackThreshold数値0px単位の値。スワイプバックアクションは、「タッチ距離」がこの値を超えた場合に開始されます。iOSテーマ用
iosSwipeBackActiveArea数値30px単位の値。スワイプバックアクションをトリガーする画面の左端の非表示領域の幅。iOSテーマ用
iosSwipeBackAnimateShadowブール値trueスワイプバックアクション中のbox-shadowアニメーションを有効/無効にします。パフォーマンスを向上させるために無効にすることができます。iOSテーマ用
iosSwipeBackAnimateOpacityブール値trueスワイプバックアクション中の不透明度アニメーションを有効/無効にします。パフォーマンスを向上させるために無効にすることができます。iOSテーマ用
mdSwipeBackブール値false画面の左端からスワイプして前のページに戻る機能を有効/無効にします。MDテーマ用
mdSwipeBackThreshold数値0px単位の値。スワイプバックアクションは、「タッチ距離」がこの値を超えた場合に開始されます。MDテーマ用
mdSwipeBackActiveArea数値30px単位の値。スワイプバックアクションをトリガーする画面の左端の非表示領域の幅。MDテーマ用
mdSwipeBackAnimateShadowブール値trueスワイプバックアクション中のbox-shadowアニメーションを有効/無効にします。パフォーマンスを向上させるために無効にすることができます。MDテーマ用
mdSwipeBackAnimateOpacityブール値falseスワイプバックアクション中の不透明度アニメーションを有効/無効にします。パフォーマンスを向上させるために無効にすることができます。MDテーマ用
ブラウザ履歴
browserHistoryブール値falseウェブアプリ（Cordova/Capacitorまたはホーム画面ウェブアプリではない）を開発する場合、ハッシュナビゲーションを有効にすることが有用です（ブラウザのURLは「http://my-webapp.com/#!/about.html」のようになります）。ユーザーは、ブラウザのデフォルトの戻るボタンと進むボタンを使用してアプリの履歴を移動することもできます。
browserHistoryRoot文字列ブラウザ履歴ルートURLセパレータ（例：「http://my-app.com/」）。空の("") `browserHistorySeparator`を使用する場合にのみ役立ちます。
browserHistoryAnimateブール値trueブラウザ履歴の変更時のページ遷移を有効/無効にします。
browserHistoryAnimateOnLoadブール値falseアプリ読み込み時のブラウザ履歴ページ遷移を有効/無効にします。
browserHistorySeparator文字列#!ブラウザ履歴URLセパレータ。'#page/'のようなものに変更できます。その場合、ブラウザ履歴URLは「http://myapp.com/#page/about.html」のようになります。
browserHistoryOnLoadブール値trueアプリ読み込み時にブラウザ履歴URLの解析とページの読み込みを無視するには、無効にします。
browserHistoryInitialMatchブール値falseサーバーが要求されたURLに一致するコンテンツで応答するように構成されている場合（例：Nuxt.js、Next.jsなどのサーバーサイドレンダリングフレームワークを使用する場合）に`true`に設定します。Framework7-React/Vue/Svelteで使用する場合も有効にする必要があります。デフォルトでは無効です。
browserHistoryStoreHistoryブール値true有効にすると（デフォルト）、ルーター履歴をlocalStorageに保存し、次のウェブアプリ訪問時に復元しようとします。
browserHistoryTabs文字列replace`replace`または`push`になります。「replace」（デフォルト）の場合、ルーティング可能なタブの変更時に状態を置き換えます。それ以外の場合は（「push」の場合）、ルーティング可能なタブの変更ごとに履歴に追加されるため、ブラウザの戻るボタンを使用してタブ間を戻ることができます。
イベントハンドラ
onオブジェクト

イベントハンドラのオブジェクト。例えば

var view = app.views.create('.view-main', {
  on: {
    pageInit: function () {
      console.log('page init')
    }
  }
})

以下のすべてのパラメータは、グローバルアプリパラメータの`view`プロパティで使用して、すべてのビューのデフォルトを設定できます。例えば

var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
    xhrCache: false,
  }
});

ビューのメソッドとプロパティ

ビューを作成するには、次のように呼び出します。

var view = app.views.create({ /* parameters */ })

その後、便利なメソッドとプロパティを持つ初期化されたインスタンス（上記の例では`view`変数）が取得できます。

プロパティ
view.appグローバルアプリインスタンスへのリンク
view.elビューのHTML要素
view.$elビューのHTML要素を含むDom7インスタンス
view.name`name`パラメータで渡されたビュー名
view.mainメインビューかどうかを示すブール値のプロパティ
view.routes使用可能なルーターのルートを含む配列
view.historyビュー履歴を含む配列
view.paramsビューの初期化パラメータを含むオブジェクト
view.routerビューの初期化されたルーターインスタンス
メソッド
view.destroy()ビューインスタンスを破棄します。
view.on(event, handler)イベントハンドラを追加します。
view.once(event, handler)発火後に削除されるイベントハンドラを追加します。
view.off(event, handler)イベントハンドラを削除します。
view.off(event)指定されたイベントのすべてのハンドラを削除します。
view.emit(event, ...args)インスタンスでイベントを発火します。

ビューイベント

ビューは、ビュー要素とアプリおよびビューインスタンスで以下のDOMイベントとイベントを発火します。

ビューDOMイベント

イベントターゲット説明
view:initビュー要素<div class="view">ビューの初期化時にトリガーされます。
view:resizeビュー要素<div class="view">(`masterDetailResizable`が有効な場合)マスターディテールサイズの変更時にトリガーされます。

ビューインスタンスイベント

ビューインスタンスは、自身インスタンスとアプリインスタンスの両方でイベントを発火します。アプリインスタンスのイベントは、`view`というプレフィックスが付いた同じ名前を持ちます。

イベントターゲット引数説明
initview(view)ビューの初期化時にトリガーされます。
viewInitapp
resizeview(view, width)(`masterDetailResizable`が有効な場合)マスターディテールサイズの変更時にトリガーされます。
viewResizeapp

ルーターAPI/メソッドとプロパティ

ビューの主な目的は、ページ間のナビゲーション/ルーティングです。`view.router`でルーターインスタンスにアクセスできます。ルーティングとナビゲーションを制御するための多くの便利なメソッドとプロパティがあります。

ルーターのプロパティ
router.appグローバルアプリインスタンスへのリンク
router.view関連するビューインスタンスへのリンク
router.paramsルーターの初期化パラメータを含むオブジェクト
router.elルーターのビューHTML要素
router.$elルーターのビューHTML要素を含むDom7インスタンス
router.currentPageEl現在のページのHTML要素
router.routes使用可能なルーターのルートを含む配列
router.historyルーターのビュー履歴を含む配列
router.cacheルーター/ビューのキャッシュデータを含むオブジェクト
router.currentRoute現在のルートデータを含むオブジェクト。以下のプロパティがあります。
  • `url` - ルートURL
  • `path` - ルートパス
  • `query` - ルートクエリを含むオブジェクト。URLが`/page/?id=5&foo=bar`の場合、`{id: '5', foo: 'bar'}`というオブジェクトが含まれます。
  • `params` - ルートパラメータ。`/page/user/:userId/post/:postId/`パスと`/page/user/55/post/12/`ページのURLを持つ一致するルートがある場合、`{userId: '55', postId: '12'}`というオブジェクトになります。
  • `name` - ルート名
  • `hash` - ルートURLハッシュ
  • `route` - 使用可能なルートから一致するルートを含むオブジェクト
  • `context` - ルートに渡されたコンテキスト
router.previousRoute以前にアクティブだったルートデータを含むオブジェクト。`currentRoute`と同じオブジェクト形式です。
router.allowPageChangeページの変更/ナビゲーションが許可されているかどうかを示すブール値のプロパティ
ルーターメソッド
router.navigate(url, options)新しいページに移動（読み込み）します。
  • url - string - 移動するURL
  • options - 追加のナビゲーションプロパティを含むobject（オプション）
    • reloadCurrent (boolean) - 現在のページをルートからの新しいページで置き換えます。この場合、アニメーションはありません。
    • reloadPrevious (boolean) - 履歴の前のページをルートからの新しいページで置き換えます。
    • reloadAll (boolean) - 新しいページを読み込み、履歴とDOMから前のすべてのページを削除します。
    • clearPreviousHistory (boolean) - 指定されたルートにリロード/移動した後、前のページの履歴がクリアされます。
    • animate (boolean) - ページをアニメーションするかどうか（デフォルトのルーター設定を上書きします）
    • history (boolean) - ページをルーター履歴に保存するかどうか
    • browserHistory (boolean) - ページをブラウザの状態に保存するかどうか。`browserHistory`を使用している場合、ここで`false`を渡して、ルートをブラウザ履歴に保存しないようにできます。
    • ignoreCache (boolean) - `true`に設定すると、キャッシュにそのようなURLがあるかどうかを無視し、XHRを使用して再度読み込みます。
    • props (object) - ページコンポーネントのプロップとして渡されるプロップ
    • transition (string) - ルートカスタムページ遷移名
    • openIn (string) - ページルートをモーダルまたはパネルとして開くことができます。`popup`、`popover`、`loginScreen`、`sheet`、`panel`のいずれかになります。
router.navigate(parameters, options)パラメータで新しいページに移動（読み込み）します。このメソッドを使用すると、`name`でルートに移動できます。
  • parameters - object - 移動するルートの`name`、`query`、`params`を含むオブジェクト。
  • options - 追加のナビゲーションプロパティを含むobject（オプション）。前の例と同じです。

例えば、次のルートがある場合

{
  name: 'about',
  path: '/about/',
  ...
}

次のように呼び出して移動できます。

router.navigate({ name: 'about' });

パラメータを含むより複雑なルートがある場合

{
  name: 'post',
  path: '/block/:userId/:postId',
  ...
}

パラメータも渡す必要があります。

router.navigate({
  name: 'post',
  params: { userId: 1, postId: 2 },
});
router.back(url, options)ビューの履歴を遡って前のページに戻ります。
  • url - string - 移動するURL（オプション）。
    • 指定されていない場合、履歴の前のページに戻ります。
    • 指定されていて、履歴に前のページがある場合は無視されます。
    • 指定されていて、`force: true`オプションがある場合、前のページをDOMから削除し、指定されたページURLに移動します。
  • options - 追加のナビゲーションプロパティを含むobject（オプション）
    • animate (boolean) - ページをアニメーションするかどうか（デフォルトのルーター設定を上書きします）
    • browserHistory (boolean) - ページをブラウザの状態に保存するかどうか。`browserHistory`を使用している場合、ここで`false`を渡して、ルートをブラウザ履歴に保存しないようにできます。
    • ignoreCache (boolean) - `true`に設定すると、キャッシュにそのようなURLがあるかどうかを無視し、XHRを使用して再度読み込みます。
    • force (boolean) - `true`に設定すると、履歴の前のページを無視し、指定されたページを読み込みます。
router.refreshPage()現在のページを更新/リロードします。実際には、次と同じです。
router.navigate(router.currentRoute.url, {
  reloadCurrent: true,
  ignoreCache: true,
});
router.clearPreviousHistory()ルーターの以前のページ履歴をクリアし、DOMから以前のすべてのページを削除します。
router.updateCurrentUrl(url)現在のルートURLを更新し、渡されたURLに基づいてrouter.currentRouteのプロパティ（query、params、hashなど）を更新します。このメソッドは、コンテンツの読み込みや再読み込みは行いません。現在のルートURLのみを変更します。
router.generateUrl({name, query, params})

指定されたルート名に基づいてルートURLを生成します。例えば、以下のルートがある場合

{
  name: 'blogPost',
  path: '/blog/post/:postId',
  ...
}

ルートのURLは、このように取得できます。

const url = router.generateUrl({
  name: 'blogPost',
  // only for route with required params
  params: { postId: 1234 },
  // optional query
  query: { foo: 'bar' }
});
console.log(url); /* /blog/post/1234?foo=bar */
router.on(event, handler)イベントハンドラを追加します。
router.once(event, handler)発火後に削除されるイベントハンドラを追加します。
router.off(event, handler)イベントハンドラを削除します。
router.off(event)指定されたイベントのすべてのハンドラを削除します。
router.emit(event, ...args)インスタンスでイベントを発火します。

ページとビュー間のリンク

常にルーターメソッドを使用してページ間を移動するのは、必ずしも快適ではありません。多くの場合、リンク を使用してページ間を移動できます。また、data-属性を使用して追加のナビゲーションパラメータを渡すことができます。

<!-- same as router.navigate('/somepage/'); -->
<a href="/somepage/">Some Page</a>

<!-- same as router.navigate('/somepage/', {reloadCurrent: true, animate: false}); -->
<a href="/somepage/" data-animate="false" data-reload-current="true">Some Page</a>

<!-- same as router.back(); -->
<a href="#" class="back">Go back</a>

<!-- same as router.back('/home/', {force: true, ignoreCache: true}); -->
<a href="/home/" data-force="true" data-ignore-cache="true" class="back">Go back</a>

リンクのデフォルト動作

別のビューにページを読み込む必要がある場合は、リンクのdata-view属性にそのビューのCSSセレクタを指定できます。

<!-- left view -->
<div class="view view-init view-left" data-name="left">
  ...
  <!-- will load "some-page" to main view -->
  <a href="/some-page/" data-view=".view-main">Some Page</a>
  ...
</div>
<!-- main view -->
<div class="view view-init view-main">
  ...
  <!-- will load "another-page" to left view -->
  <a href="/another-page/" data-view=".view-left">Another Page</a>
  ...
</div>

「現在の」ビュー（現在アクティブ/表示されているViewインスタンス）にページを読み込む必要がある場合は、data-view="current"属性を設定する必要があります。

<!-- will load "another-page" in current view -->
<a href="/another-page/" data-view="current">Another Page</a>

ルーターが特定のリンクの処理を防止する必要がある場合は、そのようなリンクにprevent-routerクラスを追加できます。

<!-- This link will be ignored by router -->
<a href="/some-page/" class="prevent-router">Some Page</a>

ルーターイベント

ルーターには多くの有用なイベントがあります。

ルーターDOMイベント

ルーターは、ページをスワイプバックする際に次のDOMイベントを発生させます。

イベントターゲット説明
swipeback:moveビュー要素<div class="view">スワイプバック移動中にトリガーされます。
swipeback:beforechangeビュー要素<div class="view">スワイプバックアニメーションが前のページに切り替わる直前に、離したときにトリガーされます。
swipeback:afterchangeビュー要素<div class="view">スワイプバックアニメーションが前のページに切り替わった後に、離したときにトリガーされます。
swipeback:beforeresetビュー要素<div class="view">スワイプバックアニメーションが現在のページに戻る直前に、離したときにトリガーされます。
swipeback:afterresetビュー要素<div class="view">スワイプバックアニメーションが現在のページに戻った後に、離したときにトリガーされます。

ルーターインスタンスイベント

ルーターイベントはViewインスタンスとAppインスタンスにバブルアップされるため、ルーターインスタンスで発生したイベントは、ビューとアプリのインスタンスでも使用できます。

イベント引数説明
routeChange(newRoute, previousRoute, router)現在のルートの変更時に発生します。
routeChanged(newRoute, previousRoute, router)現在のルートの変更時、およびページ遷移後に発生します。
routeUrlUpdate(newRoute, router)router.updateCurrentUrlメソッドが呼び出されたときに発生します。
XHRイベント
routerAjaxStart(xhr, options)ルーターXHRが開かれ、XHRが送信される前に発生します。送信前にXHRオブジェクトを変更するために使用できます。カスタムヘッダーなどを設定するには、このコールバックを使用します。引数として、XHRオブジェクトとナビゲーションoptionsオブジェクトを受け取ります。
routerAjaxSuccess(xhr, options)リクエストが成功したときに発生します。引数として、XHRオブジェクトとナビゲーションoptionsオブジェクトを受け取ります。
routerAjaxError(xhr, options)リクエストが失敗した場合に発生します。引数として、XHRオブジェクトとナビゲーションoptionsオブジェクトを受け取ります。
routerAjaxComplete(xhr, options)リクエストが終了したときに発生します。引数として、XHRオブジェクトとナビゲーションoptionsオブジェクトを受け取ります。
スワイプバックイベント
swipebackMove(data)スワイプバック移動中にトリガーされます。dataには、次のプロパティを持つオブジェクトが含まれています：percentage、currentPageEl、previousPageEl、currentNavbarEl、previousNavbarEl。
swipebackBeforeChange(data)スワイプバックアニメーションが前のページに切り替わる直前に、離したときにトリガーされます。dataには、次のプロパティを持つオブジェクトが含まれています：currentPageEl、previousPageEl、currentNavbarEl、previousNavbarEl。
swipebackAfterChange(data)スワイプバックアニメーションが前のページに切り替わった後に、離したときにトリガーされます。dataには、次のプロパティを持つオブジェクトが含まれています：currentPageEl、previousPageEl、currentNavbarEl、previousNavbarEl。
swipebackBeforeReset(data)スワイプバックアニメーションが現在のページに戻る直前に、離したときにトリガーされます。dataには、次のプロパティを持つオブジェクトが含まれています：currentPageEl、previousPageEl、currentNavbarEl、previousNavbarEl。
swipebackAfterReset(data)スワイプバックアニメーションが現在のページに戻った後に、離したときにトリガーされます。dataには、次のプロパティを持つオブジェクトが含まれています：currentPageEl、previousPageEl、currentNavbarEl、previousNavbarEl。
ページイベント
pageMounted(pageData)新しいページがDOMに挿入されたとき、またはkeepAliveルートを持つページがDOMにマウント/アタッチされたときにトリガーされます。引数として、ページデータを受け取ります。
pageInit(pageData)ルーターが必要なページのコンポーネントとナビゲーションバーを初期化した後にトリガーされます。引数として、ページデータを受け取ります。
pageReinit(pageData)既に初期化されているページに移動した場合にトリガーされます。引数として、ページデータを受け取ります。
pageBeforeIn(pageData)すべてが初期化され、ページがビューに遷移する準備ができたときにトリガーされます（アクティブ/現在の位置に）。引数として、ページデータを受け取ります。
pageAfterIn(pageData)ページがビューに遷移した後にトリガーされます。引数として、ページデータを受け取ります。
pageBeforeOut(pageData)ページがビューから遷移する直前にトリガーされます。引数として、ページデータを受け取ります。
pageAfterOut(pageData)ページがビューから遷移した後にトリガーされます。引数として、ページデータを受け取ります。
pageBeforeUnmount(pageData)keepAliveルートを持つページがDOMからアンマウント/デタッチされる直前にトリガーされます。引数として、ページデータを受け取ります。
pageBeforeRemove(pageData)ページがDOMから削除される直前にトリガーされます。メモリを解放するために、いくつかのイベントをデタッチしたり、いくつかのプラグインを破棄したりする必要がある場合に非常に役立ちます。引数として、ページデータを受け取ります。このイベントは、keepAliveルートではトリガーされません。
ルーティング可能なタブイベント
tabInit
tabMounted		(newTabEl, tabRoute)ルーティング可能なタブコンテンツが読み込まれた直後にトリガーされます。引数として、イベントハンドラは以下を受け取ります。
  • newTabEl - ルートコンテンツが読み込まれたタブHTML要素（新しいタブ）
  • tabRoute - 新しいタブルート
tabBeforeRemove(oldTabEl, newTabEl, tabRoute)ルーティング可能なタブコンテンツが読み込まれた直後にトリガーされます。引数として、イベントハンドラは以下を受け取ります。
  • oldTabEl - ルートコンテンツが削除されたタブHTML要素（古いタブ）
  • newTabEl - ルートコンテンツが読み込まれたタブHTML要素（新しいタブ）
  • tabRoute - 新しいタブルート
ルーティング可能なモーダルイベント
modalInit
modalMounted		(modalEl, modalRoute, modal)ルーティング可能なモーダルコンテンツが読み込まれてDOMに追加された直後にトリガーされます。引数として、イベントハンドラは以下を受け取ります。
  • modalEl - 読み込まれたモーダルHTML要素
  • modalRoute - モーダルルート
  • modal - 作成されたモーダルインスタンス
modalBeforeRemove(modalEl, modalRoute, modal)ルーティング可能なモーダルがDOMから削除され、破棄される直前にトリガーされます。引数として、イベントハンドラは以下を受け取ります。
  • modalEl - モーダルHTML要素
  • modalRoute - モーダルルート
  • modal - モーダルインスタンス

ビューの自動初期化

View APIを使用する必要がなく、アプリの初期化時にViewがDOM内にある場合、view-initクラスを追加するだけで自動的に初期化できます。

<!-- Add view-init class -->
<div class="view view-init">
  ...
</div>

しかし、Viewパラメータはどうでしょうか？この場合、data-属性で渡すことができます。

キャメルケースで使用されるパラメータ（例：browserHistory）は、data-属性ではケバブケース（例：data-browser-history）として使用する必要があります。

<!-- view parameters in data- attributes -->
<div class="view view-init" data-url="/" data-name="home" data-browser-history="true">
  ...
</div>

この場合、作成されたViewインスタンスにアクセスするには、以下を使用できます。

<!-- main view -->
<div class="view view-main view-init">
  ...
</div>

<!-- another view -->
<div class="view view-init" data-name="home">
  ...
</div>
var mainView = app.views.main;
var homeView = app.views.home;

初期ページルート

初期ページは、ルートを使用して正しく読み込むこともできます。アプリレイアウトでは、Viewを空のままにしておく必要があります。

<body>
  <div id="app">
    <div class="view view-main"></div>
  </div>
</body>

ルートでは、「home」ルートを指定できます。

routes: [
  {
    path: '/',
    url: './home.html'
  },
  ...
]

そして、Viewを初期化するときは、それがデフォルトのURLであることを指定する必要があります。

app.views.create('.view-main', {
  url: '/'
})

これで完了です。アプリのロード時に、「home.html」ファイルからホームページコンテンツが読み込まれます。

マスターディテール

マスター詳細パターンは、幅の広い画面やタブレットでよく使用され、2つのビューで構成されています。

折り畳まれた場合（狭い画面の場合）、このようなページ間のナビゲーションは通常のルーティングのように動作します。

マスター詳細ビューへの/からのナビゲーションは、トランジションなしで行われます。

マスターページが読み込まれると、他のすべてのページは詳細ページとして読み込まれます。マスター詳細ビューから「離れる」には、reloadAllナビゲーションパラメータを使用することをお勧めします。

マスター詳細を有効にするには

マスター詳細が有効になっている場合、カスタムスタイルに使用できる追加クラスを以下に使用できます。

例えば

const mainView = app.views.create('.view-main', {
  // enable master detail
  masterDetailBreakpoint: 800,
  routes: [
    {
      path: '/',
      url: './pages/master.html',
      // specify home route as master route
      master: true,
      // detail routes
      detailRoutes: [
        {
          path: '/detail/:id/',
          url: './pages/detail.html',
        },
      ]
    },
  ]
});

そして、以下のようなものが必要です。

カスタムページ遷移

デフォルトのテーマ固有のページ遷移に加えて、カスタムページ遷移を作成するか、追加の遷移効果のいずれかを使用できます。

組み込みの追加のカスタムページ遷移は次のとおりです。

  • f7-circle
  • f7-cover
  • f7-cover-v
  • f7-dive
  • f7-fade
  • f7-flip
  • f7-parallax
  • f7-push

特定のルートでそのような遷移を使用するには、ルートオプションで指定する必要があります。

routes = [
  ...
  {
    path: '/some-page/',
    url: '...',
    options: {
      transition: 'f7-circle',
    },
  },
  ...
]

カスタム遷移を使用して既存のルートを読み込むには、router.navigate()メソッドで渡す必要があります。

// load /some-page/ with "f7-cover" transition
router.navigate('/some-page/', { transition: 'f7-cover' })

または、data-transition属性を介してリンクで直接指定することもできます（他のルートオプションと同様）。

<!-- load /some-page/ with "f7-cover" transition -->
<a href="/some-page/" data-transition="f7-cover">...</a>

組み込みの遷移に加えて、カスタム遷移を作成できます。CSSアニメーションを使用して実行できます。

カスタムページ遷移を指定すると、ルーターはその要素（<div class="view">）に次のクラスを追加します。

  • router-transition-[name]-forward - 新しいページに移動する場合
  • router-transition-[name]-backward - 前のページに戻る場合

そして、前方へ移動する際にはpage-nextで、後方へ移動する際にはpage-currentでanimationendイベントを待ちます。

従って、カスタムトランジションの名前をmy-transitionとすると、次のように指定できます。

.router-transition-my-transition-forward,
.router-transition-my-transition-backward {
  /* Apply some styles for view element when custom transition is running */
}
.router-transition-my-transition-forward .page-current {
  /* Animation when current page transforms to previous page */
  animation: my-transition-current-to-prev 400ms;
}
.router-transition-my-transition-forward .page-next {
  /* Animation when next page transforms to current page (new page comes into view) */
  animation: my-transition-next-to-current 400ms;
}
.router-transition-my-transition-backward .page-current {
  /* Animation when current page transforms to next page (going back) */
  animation: my-transition-current-to-next 400ms;
}
.router-transition-my-transition-backward .page-previous {
  /* Animation when previous page transforms to current page (previous page comes into view) */
  animation: my-transition-prev-to-current 400ms;
}

/* Specify animations */
@keyframes my-transition-current-to-prev {
  /* ... */
}
@keyframes my-transition-next-to-current {
  /* ... */
}
@keyframes my-transition-current-to-next {
  /* ... */
}
@keyframes my-transition-prev-to-current {
  /* ... */
}

例えば、組み込みのf7-coverトランジションは次のように指定されています。

.router-transition-f7-cover-forward,
.router-transition-f7-cover-backward {
  background: #000;
  perspective: 1200px;
}
.router-transition-f7-cover-forward .page-next {
  animation: f7-cover-next-to-current 450ms forwards;
}
.router-transition-f7-cover-forward .page-current {
  animation: f7-cover-current-to-prev 450ms forwards;
}
.router-transition-f7-cover-backward .page-current {
  animation: f7-cover-current-to-next 450ms forwards;
}
.router-transition-f7-cover-backward .page-previous {
  animation: f7-cover-prev-to-current 450ms forwards;
}
@keyframes f7-cover-next-to-current {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-cover-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-cover-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
}
@keyframes f7-cover-prev-to-current {
  from {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
このドキュメントを改善する
このページ