移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局

在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。

静态布局

静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏：

<body>
...
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="index" class="page">
<div class="page-content">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Awesome App</div>
</div>
</div>
<p>Other content goes here</p>
...
<div class="toolbar">
<div class="toolbar-inner">
Hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
</body>

复制

实例预览

固定布局

在固定布局中，也是每个页面都有它自己的导航栏和工具栏，但是它们在屏幕上始终可见，不会随着页面内容滚动：

<body>
...
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="index" class="page navbar-fixed toolbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Awesome App</div>
</div>
</div>
<div class="page-content">
<p>Other content goes here</p>
...
</div>
<div class="toolbar">
<div class="toolbar-inner">
Hello
</div>
</div>
</div>
</div>
</div>
</div>
...
</body>

复制

实例预览

正如你所见，与静态布局相比，固定布局的不同之处在于：

导航栏和工具栏是Page的子元素(<div class="page">)
每个页面拥有额外的“navbar-fixed”类（对于固定导航栏）和“toolbar-fixed”类（对于固定工具栏）

注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”类，而不是对每个单页面分别添加。

穿透布局

This type of layout is only supported by iOS theme

这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航（不要忘记在视图初始化的时候启用它）。视图初始化)

<body>
...
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Awesome App</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<p>Other content goes here</p>
...
</div>
</div>
</div>
<div class="toolbar">
<div class="toolbar-inner">
Hello
</div>
</div>
</div>
</div>
...
</body>

复制

实例预览

正如你所见，与静态和固定布局相比，穿透布局的不同之处在于：

导航栏和工具栏是视图的子元素(<div class="view">)
具有穿透布局的导航栏和工具栏的视图拥有额外的“navbar-through”类（对于穿透类型的导航栏）和"toolbar-through"类（对于穿透类型的工具栏）。

混合布局

对于不同的视图，你可以使用不同的布局，比如在一个视图中使用固定布局，在另一个中使用穿透布局。其实，你也可以在单视图中混合使用这些布局。例如，你可以使用穿透的导航栏和固定的工具栏：

<body>
...
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Awesome App</div>
</div>
</div>
<div class="pages navbar-through fixed-through">
<div data-page="index" class="page">
<div class="page-content">
<p>Other content goes here</p>
...
</div>
<div class="toolbar">
<div class="toolbar-inner">
Hello
</div>
</div>
</div>
</div>
</div>
</div>
...
</body>

复制

实例预览

无导航栏/工具栏

当然，如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在page/pages/view中添加相应的类（“"navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through”）

速记表

正如你所见，这些布局都很容易理解，不同之处在于父元素上额外添加的类，以及不同的嵌套层级。下面是速记表

静态

.view
.pages
.page
.page-content
.navbar
// other page content
.toolbar

复制

固定

.view
.pages.navbar-fixed.navbar-through
.page
.navbar
.page-content
.toolbar

复制

穿透

.view
.navbar
.pages.navbar-through.toolbar-through
.page
.page-content
.toolbar

复制