【Framework7开发笔记之App骨架搭建】大道之行,天下为公。这篇文章主要讲述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="https://www.songbingjia.com/android/#tab-1" class="tab-link tab-link-active"> Tab 1< /a> < a href="https://www.songbingjia.com/android/#tab-2" class="tab-link"> Tab 2< /a> < a href="https://www.songbingjia.com/android/#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
推荐阅读
- [React Native]初探基于RN的Android开发
- Android中 实现队列方式处理优先级信息
- Android Studio V4 V7 包冲突的问题
- [LeetCode] 42. Trapping Rain Water 收集雨水
- Maven Eclipse示例
- Maven Web应用程序
- 如何在Windows上安装Maven
- Maven插件
- Lync 项目经验-34-分配公网证书 For Office Web App Server 2013