Vue 2 Reference > v-ons-page

v-ons-page

This component defines the root of each page. If the content is large it will become scrollable. A navigation bar can be added to the top of the page using the <v-ons-toolbar> component.

Tutorial

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.

See also

Props

Name Type Description
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 Specify modifier name to specify custom styles. Optional.
on-infinite-scroll Path of the function to be executed on infinite scrolling. Example: app.loadData. The function receives a done callback that must be called when it’s finished. Optional.

Preset Modifiers

Name Description
material Material Design style

Events

Name Description
init Fired right after the page is attached.
show Fired right after the page is shown.
hide Fired right after the page is hidden.
destroy Fired right before the page is destroyed.
deviceBackButton Fired on device back button. Default behavior is calling the parent handler.
init

Fired right after the page is attached.

Parameters
Name Type Description
event Object Event object.
show

Fired right after the page is shown.

Parameters
Name Type Description
event Object Event object.
hide

Fired right after the page is hidden.

Parameters
Name Type Description
event Object Event object.
destroy

Fired right before the page is destroyed.

Parameters
Name Type Description
event Object Event object.
deviceBackButton

Fired on device back button. Default behavior is calling the parent handler.

Parameters
Name Type Description
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.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.