Framework7开发笔记之App骨架搭建

Posted ygj0930

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Framework7开发笔记之App骨架搭建相关的知识,希望对你有一定的参考价值。

 

一: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骨架搭建的主要内容,如果未能解决你的问题,请参考以下文章

Framework7学习笔记之 工具栏

Framework7学习笔记之导航栏与工具栏的布局类型

Node js之使用应用生成器来搭建第一个基于express的应用

vue搭建骨架屏步骤配置

STM32F412应用开发笔记之六:使用片上Flash存储参数

Android电商开发项目基础骨架