Page Vue Component

    Page in Framework7 has the same meaning as when you think about web pages. Page is the main component to display and operate content.

    There are following components included:

    • - main page element
    • **f7-page-content** - additional inner page content element
    EventDescription
    <f7-page> events
    page:mountedEvent will be triggered when page with keepAlive route is mounted/attached to DOM
    page:initEvent will be triggered after Framework7 initialize required page’s components and navbar
    page:reinitThis event will be triggered in case of navigating to the page that was already initialized
    page:beforeinEvent will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
    page:afterinEvent will be triggered after page transitioned into view
    page:beforeoutEvent will be triggered right before page is going to be transitioned out of view
    page:afteroutEvent will be triggered after page transitioned out of view
    page:beforeunmountEvent will be triggered when page with keepAlive route is going to be unmounted/detached from DOM
    page:beforeremoveEvent will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory. This event won’t be triggered for keepAlive routes.
    ptr:pullstartEvent will be triggered when you start to move pull to refresh content
    ptr:pullmoveEvent will be triggered during you move pull to refresh content
    ptr:pullendEvent will be triggered when you release pull to refresh content
    ptr:refreshEvent will be triggered when pull to refresh enters in “refreshing” state
    ptr:doneEvent will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method)
    infiniteEvent will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom.
    <f7-page-content> events
    tab:showEvent will be triggered when Tab becomes visible/active
    tab:hideEvent will be triggered when Tab becomes hidden/inactive
    ptr:pullstart
    ptr:pullmove
    ptr:pullend
    ptr:refresh
    ptr:done
    infinite    		Same as events
    • **default** - element will be inserted as a child of “page-content”, if page-content prop is enabled (by default)

    Pull To Refresh