v-ons-page

ページ定義のためのコンポーネントです。このコンポーネントの内容はスクロールが許可されます。

実例

The “VOnsPage” component

The VOnsPage component serves as the main view of a screen in an app. It covers the whole screen and is used as a container for the other components. When managing multiple views, all of them must be contained in VOnsPage components.

<v-ons-page>
  Content goes here
</v-ons-page>

This component automatically spawns a background and a content elements. These can also be manually provided for higher customizability:

<v-ons-page>
  Toolbar here

  <div class="background"></div>

  <div class="content">
    Scrollable content here
  </div>

  Fixed content here
</v-ons-page>

Since content element is transparent by default, we can add custom colors to the background element. Notice that, if content element is provided, scrollable and fixed content must be manually separated as well.

関連情報

Prop一覧

名前 型 / デフォルト値 概要
infinite-scroll Function Called when the scroll is near the bottom. This function gets a done callback as its first argument. Useful for loading extra items in a list. (翻訳中) Optional.
modifier String スタイル定義をカスタマイズするための名前を指定します。 Optional.

プリセットのmodifier

Name 概要
material Material Design style (翻訳中)

イベント

名前 概要
init ページがアタッチされた後に発火します。
show ページが表示された後に発火します。
hide ページが隠れた後に発火します。
destroy ページが破棄される前に発火します。
deviceBackButton Fired on device back button. Default behavior is calling the parent handler. (翻訳中)
init

ページがアタッチされた後に発火します。

パラメーター
名前 概要
event Object Event object.
show

ページが表示された後に発火します。

パラメーター
名前 概要
event Object Event object.
hide

ページが隠れた後に発火します。

パラメーター
名前 概要
event Object Event object.
destroy

ページが破棄される前に発火します。

パラメーター
名前 概要
event Object Event object.
deviceBackButton

Fired on device back button. Default behavior is calling the parent handler. (翻訳中)

パラメーター
名前 概要
event Object Event object. (翻訳中)
event.preventDefault Function Avoids the default behavior. (翻訳中)
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button. (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。