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

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: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
          },
          {
            title: 'Don\'t Stop Me Now',
            author: 'Queen',
            cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
          },
          {
            title: 'Billie Jean',
            author: 'Michael Jackson',
            cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
          },
        ],
        songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
        authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
      };
    },
    methods: {
      loadMore(done) {
        const self = this;
        setTimeout(() => {
          const picURL = `https://cdn.framework7.io/placeholder/abstract-88x88-${(Math.floor(Math.random() * 10) + 1)}.jpg`;
          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,
            cover: picURL,
          });
          done();
        }, 1000);
      },
    },
  };
</script>

← Navbar

Panel / Side Panels →