FRAMEWORK7 Development Notes App skeleton Building

One: App skeleton

Common apps have a skeleton: with the bottom of the tab to organize a number of functional modules, click the different options to switch to a different function page, in the specific function of the page refinement, jump to a specific page, the operation is completed back to the skeleton.

Two: Framework7 skeleton scheme one: put the skeleton in a page, tab to manage the different functions of the page.

<Divclass= "page">  <Divclass= "NavBar">    <Divclass= "Navbar-inner">Skeleton page Title ...</Div>  </Div>  <!--Skeleton Bottom toolbar, defining tab Check -  <Divclass= "Toolbar Tabbar">    <Divclass= "Toolbar-inner">      <ahref= "#tab-1"class= "Tab-link tab-link-active">Tab 1</a>      <ahref= "#tab-2"class= "Tab-link">Tab 2</a>      <ahref= "#tab-3"class= "Tab-link">Tab 3</a>    </Div>  </Div>  <!--Define the Tabs page, one tab to define a page-content. Toggle different tab to display different page-content to achieve the effect similar to "page break" -  <Divclass= "Tabs">    <DivID= "Tab-1"class= "page-content tab tab-active">      <Divclass= "Block">        <P>TAB1 page Content</P>        ...      </Div>    </Div>    <DivID= "Tab-2"class= "page-content tab">      <Divclass= "Block">        <P>Page content for TAB2 t</P>        ...      </Div>    </Div>    <DivID= "Tab-3"class= "page-content tab">      <Divclass= "Block">        <P>TAB3 page Content</P>        ...      </Div>    </Div>  </Div></Div>

The pros and cons of using a page to organize your app skeleton:

Advantages: Skeleton as a whole page file, the first time the request is loaded, after the operation only need to switch the different tab on the same page, fast, no need to request rendering from the server again.

Three: View as Tab

Concept of single-view app and multi-view app: There are two app view layouts in Framework7: single-View and multi-view layouts.

Single View layout: The app has only one View-main master, each page is loaded and displayed in View-main, can organize different pages through Pages+tabs in View-main?

Four: Page+toolbar

FRAMEWORK7 Development Notes App skeleton Building