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.

    Page Vue component represents Framework7's Page.

    Page Components

    There are following components included:

    • f7-page - main page element
    • f7-page-content - additional inner page content element

    Page Properties

    Prop Type Default Description
    <f7-page> properties
    name string Page name
    stacked boolean Enable for not currently active page if you use stackedPages Router parameter that keeps all pages in DOM
    messages-content boolean Enable if you use Messages component inside to add required extra styling
    page-content boolean true When enabled it automatically adds page-content element inside. Usefule to disable when you need to use few page-content elements for tabs
    tabs boolean Enable if you use Page as Tabs wrapper
    login-screen boolean Enable if you use Login Screen inside of the page to add required extra styling
    no-swipeback boolean Disables swipeback feature for the current page (affects iOS theme only)
    with-subnavbar boolean Enable if you have Sub Navbar inside of the page
    no-navbar boolean Enable if you use common Navbar layout and need to hide common Navbar (or use another one) for this page (affects iOS theme only)
    no-toolbar boolean Enable if you use common Toolbar/Tabbar layout and need to hide Toolbar (or use another one) for this page
    hide-bars-on-scroll boolean Hide Navbar & Toolbar on page scroll
    hide-navbar-on-scroll boolean Hide Navbar on page scroll
    hide-toolbar-on-scroll boolean Hide Toolbar on page scroll
    ptr boolean Enables Pull To Refresh
    ptr-distance number Custom pull to refresh trigger distance. By default (if not specified) it is 44px.
    ptr-preloader boolean true Disable if you want to use custom pull to refresh preloader element
    infinite boolean Enables Infinite Scroll
    infinite-top boolean Enables infinite scroll on top of the page
    infinite-distance boolean true Distance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px)
    infinite-preloader boolean true Disable if you want to use custom infinite-scroll preloader
    <f7-page-content> properties
    tab boolean Enable if you use page-content as Tab
    tab-active boolean Enable if the current tab is active
    ptr
    ptr-distance
    ptr-preloader
    infinite
    infinite-top
    infinite-distance
    infinite-preloader
    hide-bars-on-scroll
    hide-navbar-on-scroll
    hide-toolbar-on-scroll
    messages-content
    login-screen
    Same as <f7-page> properties

    Page Events

    Event Description
    <f7-page> events
    page:mounted Event will be triggered when page with keepAlive route is mounted/attached to DOM
    page:init Event will be triggered after Framework7 initialize required page's components and navbar
    page:reinit This event will be triggered in case of navigating to the page that was already initialized
    page:beforein Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
    page:afterin Event will be triggered after page transitioned into view
    page:beforeout Event will be triggered right before page is going to be transitioned out of view
    page:afterout Event will be triggered after page transitioned out of view
    page:beforeunmount Event will be triggered when page with keepAlive route is going to be unmounted/detached from DOM
    page:beforeremove Event 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:pullstart Event will be triggered when you start to move pull to refresh content
    ptr:pullmove Event will be triggered during you move pull to refresh content
    ptr:pullend Event will be triggered when you release pull to refresh content
    ptr:refresh Event will be triggered when pull to refresh enters in "refreshing" state
    ptr:done Event will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method)
    infinite Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom.
    <f7-page-content> events
    tab:show Event will be triggered when Tab becomes visible/active
    tab:hide Event will be triggered when Tab becomes hidden/inactive
    ptr:pullstart
    ptr:pullmove
    ptr:pullend
    ptr:refresh
    ptr:done
    infinite
    Same as <f7-page> events

    Page Slots

    Page Vue component (<f7-page>) has additional slots for custom elements:

    • default - element will be inserted as a child of "page-content", if page-content prop is enabled (by default)
    • fixed - element will be inserted as a direct child of "page" right before "page-content"
    <f7-page>
      <div slot="fixed">Fixed element</div>
      <p>Page content goes here</p>
    </f7-page>
    
    <!-- Renders to: -->
    
    <div class="page">
      <div>Fixed element</div>
      <div class="page-content">
        <p>Page content goes here</p>
      </div>
    </div>

    Examples

    Infinite Scroll

    <template>
      <f7-page
        infinite
        :infinite-distance="50"
        :infinite-preloader="showPreloader"
        @infinite="loadMore"
      >
        <f7-navbar title="Infinite Scroll"></f7-navbar>
        <f7-block-title>Scroll bottom</f7-block-title>
        <f7-list>
          <f7-list-item v-for="(item, index) in items" :title="`Item ${item}`" :key="index"></f7-list-item>
        </f7-list>
      </f7-page>
    </template>
    <script>
      export default {
        data() {
          return {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
            allowInfinite: true,
            showPreloader: true,
          };
        },
        methods: {
          loadMore() {
            const self = this;
            if (!self.allowInfinite) return;
            self.allowInfinite = false;
    
            setTimeout(() => {
              if (self.items.length >= 200) {
                self.showPreloader = false;
                return;
              }
    
              const itemsLength = self.items.length;
    
              for (let i = 1; i <= 20; i += 1) {
                self.items.push(itemsLength + i);
              }
    
              self.allowInfinite = true;
            }, 1000);
          },
        },
      };
    </script>

    Pull To Refresh

    <template>
      <f7-page ptr @ptr:refresh="loadMore">
        <f7-navbar title="Pull To Refresh"></f7-navbar>
        <f7-list media-list>
          <f7-list-item
            v-for="(item, index) in items"
            :key="index"
            :title="item.title"
            :subtitle="item.author">
            <img slot="media" :src="item.cover" width="44" />
          </f7-list-item>
    
          <f7-block-footer>
            <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
          </f7-block-footer>
        </f7-list>
      </f7-page>
    </template>
    <script>
      export default {
        data() {
          return {
            items: [
              {
                title: 'Yellow Submarine',
                author: 'Beatles',
                cover: 'http://lorempixel.com/88/88/abstract/1',
              },
              {
                title: 'Don\'t Stop Me Now',
                author: 'Queen',
                cover: 'http://lorempixel.com/88/88/abstract/2',
              },
              {
                title: 'Billie Jean',
                author: 'Michael Jackson',
                cover: 'http://lorempixel.com/88/88/abstract/3',
              },
            ],
            songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
            authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
          };
        },
        methods: {
          loadMore(event, done) {
            const self = this;
    
            setTimeout(() => {
              const picURL = `http://lorempixel.com/88/88/abstract/${Math.round(Math.random() * 10)}`;
              const song = self.songs[Math.floor(Math.random() * self.songs.length)];
              const author = self.authors[Math.floor(Math.random() * self.authors.length)];
    
              self.items.push({
                title: song,
                author,
                img: picURL,
              });
    
              done();
            }, 1000);
          },
        },
      };
    </script>