1.导航栏和工具栏的布局类型
在向应用添加导航栏和工具栏之前,我们需要决定使用哪种布局。
Framework7在这方面很自由,有3种不同类型的导航栏/工具栏布局,它们对应着在页面/视图中的不同位置。
静态布局
静态布局可能是最少使用的布局。在这种情况下,导航栏和工具栏只是可以滚动的页面内容的一部分,每个页面都有它自己的导航栏和工具栏
固定布局
在固定布局中,也是每个页面都有它自己的导航栏和工具栏,但是它们在屏幕上始终可见,不会随着页面内容滚动
与静态布局相比,固定布局的不同之处在于:
导航栏和工具栏是Page的子元素(
每个页面拥有额外的“navbar-fixed”类(对于固定导航栏)和“toolbar-fixed”类(对于固定工具栏)
注意,如果你想要对单视图中的每个页面使用固定布局,可以直接在父页面(
穿透布局(iOS only)
这是最有趣,最被广泛使用的布局 —— 在不同页面间切换时,导航栏和工具栏保持不变。通过这种布局,可以实现酷炫的动态导航(不要忘记在视图初始化的时候启用它)
与静态和固定布局相比,穿透布局的不同之处在于:
导航栏和工具栏是视图的子元素(
具有穿透布局的导航栏和工具栏的视图拥有额外的“navbar-through”类(对于穿透类型的导航栏)和"toolbar-through"类(对于穿透类型的工具栏)
混合布局
对于不同的视图,你可以使用不同的布局,比如在一个视图中使用固定布局,在另一个中使用穿透布局。其实,你也可以在单视图中混合使用这些布局。例如,你可以使用穿透的导航栏和固定的工具栏。
无导航栏/工具栏
如果你不需要导航栏或工具栏,你大可不必包含它们,并且不用在page/pages/view中添加相应的类(“"navbar-fixed”,“navbar-through”,“toolbar-fixed”,“toolbar-through”)
2.导航栏
导航栏是一个固定区域 (在固定 和穿透布局类型中) 。它位于屏幕顶部,包含页面标题和导航元素。
导航栏包含3个部分:左、中、右。每个部分都可以包含任意的HTML内容,但推荐按照如下方式使用:
左部 用来放置返回链接、图标以及单独的文字链接。
中部 用来显示页面标题和标签链接(即按钮控制)。
右部 和左部一样。
3.导航栏布局
注意,导航栏的中心元素具有最低的宽度优先级,当屏幕不能放下全部3个元素时,中部会被截断。
4.含有链接的导航栏
要想在左/右部添加链接,只需要添加 标签,以及额外的 link类:
额外的 link 类并不是必须的,但是推荐使用,因为它添加了需要的链接尺寸,以及透明度特效。
多个链接
屏幕快照 2016-12-17 下午5.13.25.png
含有图标和文本的链接
只有图标的链接
5.导航栏的相关方法
myApp.hideNavbar(navbar)
myApp.showNavbar(navbar)
view.hideNavbar() 隐藏该视图中的导航栏
view.showNavbar() 显示该视图中的导航栏
myApp.sizeNavbars(viewContainer) 调用这个方法会重新计算指定的View的导航栏的位置,比如:myApp.sizeNavbars('.view-main') iOS only
6.自动隐藏导航栏
在通过Ajax载入的页面上,当你不需要导航栏时,Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。
为了实现这一点,你要做的是添加"no-navbar"类到载入的页面中(