-
入门教程
-
Vue 组件
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.
Usage examples
Minimal layout
<f7-page name="home">
<p>Page content</p>
</f7-page>
Renders to:
<div class="page" data-page="home">
<div class="page-content">
<p>Page content</p>
</div>
</div>
With Navbar
<f7-page name="home">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page" data-page="home">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content">
<p>Page content</p>
</div>
</div>
Pull To Refresh
<f7-page pull-to-refresh @ptr:refresh="onRefresh">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<p>Page content</p>
</div>
</div>
Infinite Scroll
<f7-page infinite-scroll @infinite="onInfiniteScroll">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content infinite-scroll">
<p>Page content</p>
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
</div>
Page Content as Tabs
<f7-page tabs no-page-content>
<f7-navbar title="My App"></f7-navbar>
<f7-page-content tab active id="tab-1">Tab 1 Content ...</f7-page-content>
<f7-page-content tab id="tab-2">Tab 2 Content ...</f7-page-content>
<f7-page-content tab id="tab-3">Tab 3 Content ...</f7-page-content>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div id="tab-1" class="page-content tab active">
Tab 1 Content ...
</div>
<div id="tab-2" class="page-content tab">
Tab 2 Content ...
</div>
<div id="tab-3" class="page-content tab">
Tab 3 Content ...
</div>
</div>
Slots
Page Vue component (<f7-page>) has additional slots for custom elements:
- static/default - element will be inserted right in the beginning of "page-content"
- fixed - element will be inserted right in the beginning of "page" before "before-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>
Properties
Prop | Type | Default | Description |
---|---|---|---|
name | string | Page name | |
cached | boolean | Enable if you use domCache and Inline Pages Navigation | |
messages | boolean | Enable if you use Messages component inside to add required extra styling | |
no-page-content | boolean | Enable to disable automatically added page-content element inside (e.g. 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 only) | |
theme | string | Page theme color. One of default colors | |
layout | string | Page layout theme. One of default layout themes | |
Navbar & Toolbars layout | |||
with-subnavbar | boolean | Enable if you have Sub Navbar inside of the page | |
no-navbar | boolean | Enable if you use Navbar's through-type layout and need to hide Navbar (or use another one) for this page | |
no-toolbar | boolean | Enable if you use Toolbar's through-type layout and need to hide Toolbar (or use another one) for this page | |
no-tabbar | boolean | Enable if you use Tabbar's through-type layout and need to hide Tabbar (or use another one) for this page | |
navbar-fixed | boolean | Enable when you use fixed navbar layout | |
navbar-through | boolean | Enable when you use through navbar layout | |
toolbar-fixed | boolean | Enable when you use fixed toolbar layout | |
toolbar-through | boolean | Enable when you use through toolbar layout | |
tabbar-fixed | boolean | Enable when you use fixed tabbar layout | |
tabbar-through | boolean | Enable when you use through tabbar layout | |
tabbar-labels-fixed | boolean | Enable when you use fixed tabbar layout | |
tabbar-labels-through | boolean | Enable when you use through tabbar layout | |
Hide Bars On Scroll | |||
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 | |
hide-tabbar-on-scroll | boolean | Hide Tabbar on page scroll | |
Pull To Refresh | |||
pull-to-refresh | boolean | Enables Pull To Refresh | |
pull-to-refresh-distance | Number | Custom pull to refresh trigger distance. By default (if not specified) it is 44px. | |
pull-to-refresh-layer | boolean | true | Disable if you want to use custom pull to refresh layer (preloader) element |
Infinite Scroll | |||
infinite-scroll | boolean/string | Enables Infinite Scroll (if true). Or pass "top" to enable and use infinite scroll on top | |
infinite-scroll-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-scroll-preloader | boolean | true | Disable if you want to use custom infinite-scroll preloader |
Events
Event | Description |
---|---|
page:beforeinit | Event will be triggered when Framework7 just inserts new page to DOM |
page:init | Event will be triggered after Framework7 initialize required page's components and navbar |
page:reinit | This event will be triggered when cached page becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
page:beforeanimation | Event will be triggered when everything initialized and page (and navbar) is ready to be animated |
page:afteranimation | Event will be triggered after page (and navbar) animation |
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 |
page:back | Event will be triggered right before "back" transition. Difference with "pageBeforeAnimation" is that this event will be triggered for the "old" page - page that slides from center to right |
page:afterback | Event will be triggered right after "back" transition. Difference with "pageAfterAnimation" is that this event will be triggered for the "old" page - page that slides from center to right |
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. |