Framework7開發筆記之App骨架搭建

標籤：content   pos   link   navbar   開發   模組   body   標題   cti   

 

一：App骨架

    常見的app都有一個骨架：用底部的索引標籤群組織起多個功能模組，點擊不同選項切換到不同的功能頁面，在具體的功能頁面再細化、跳轉到特定的頁面，操作完成後回退到骨架。

 

二：Framework7骨架方案一：把骨架放在一個頁面中，用tab管理不同的功能頁面。

<div class="page">  <div class="navbar">    <div class="navbar-inner">      骨架頁面標題...    </div>  </div>  <!--骨架底部工具列，定義tab頁簽-->  <div class="toolbar tabbar">    <div class="toolbar-inner">      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>      <a href="#tab-2" class="tab-link">Tab 2</a>      <a href="#tab-3" class="tab-link">Tab 3</a>    </div>  </div>  <!--定義tabs頁面，一個tab定義一個page-content。切換不同tab顯示不同的page-content從而達到類似於“換頁”的效果-->  <div class="tabs">    <div id="tab-1" class="page-content tab tab-active">      <div class="block">        <p>tab1的頁面內容</p>        ...      </div>    </div>    <div id="tab-2" class="page-content tab">      <div class="block">        <p>tab2的頁面內容t</p>        ...      </div>    </div>    <div id="tab-3" class="page-content tab">      <div class="block">        <p>tab3的頁面內容</p>        ...      </div>    </div>  </div></div>

用一個Page組織app骨架的優缺點：

優點：骨架作為一個整體分頁檔，在第一次請求時即載入完畢，後面操作時只需在同一頁面切換不同tab，速度快、無需再次從伺服器請求渲染。

 

三：View as Tab

單視圖app和多視圖app的概念：Framework7中有兩種app視圖布局：單視圖布局和多視圖布局。

單視圖布局：app中只有一個view-main主視圖，各個頁面都在view-main中載入、展示，可以在view-main中通過pages+tabs組織不同頁面？

 

 

 

四：Page+Toolbar

 

Framework7開發筆記之App骨架搭建