移动端安卓和IOS开发框架Framework7教程-动态导航栏

iOS7的好评特性之一是动态导航栏。当页面过渡时，导航栏元素会滑动渐变。

• 它只对穿透类型的布局有效

• 它应该在视图初始化时通过传递dynamicNavbar: true参数来启用

动态导航栏布局

动态导航栏和一般的导航栏是一样的，区别只在于，你可以对导航栏的组成部分（左、中、右）加入额外的类，来说明使用哪个过渡特效。

• 默认情况下（如果没有额外的类），每个导航栏部分都具有"渐变"过渡特效

• 如果你向任何一个导航栏部分添加"sliding"类，它会具有"滑动"特效

• 为了美观起见，在不同的页面之间，你应当保持同一个过渡类型

默认(渐变)过渡

1. <!-- Navbar on index page -->
2. <div class="navbar">
3.     <div class="navbar-inner">
4.         <div class="left">
5.             <a href="#" class="link">Home Left</a>
6.         </div>
7.         <div class="center">Home</div>
8.         <div class="right">
9.             <a href="#" class="link">Home Right</a>
10.         </div>
11.     </div>
12. </div>
13.  
14. <!-- Navbar on about page -->
15. <div class="navbar">
16.     <div class="navbar-inner">
17.         <div class="left">
18.             <a href="#" class="link">About Left</a>
19.         </div>
20.         <div class="center">About</div>
21.         <div class="right">
22.             <a href="#" class="link">About Right</a>
23.         </div>
24.     </div>
25. </div>

实例预览

滑动过渡

滑动过渡应该明智使用，因为它们反映了应用的导航链。

1. <!-- Navbar on index page -->
2. <div class="navbar">
3.     <div class="navbar-inner">
4.         <!-- Left part doesn't related to other pages, let's fade it out -->
5.         <div class="left">
6.             <a href="#" class="link">Home Left</a>
7.         </div>
8.  
9.         <!-- Center and Right parts reflect page title and page links, let's slide them -->
10.         <div class="center sliding">Home</div>
11.         <div class="right sliding">
12.             <a href="about.html" class="link">About</a>
13.         </div>
14.     </div>
15. </div>
16.  
17. <!-- Navbar on about page -->
18. <div class="navbar">
19.     <div class="navbar-inner">
20.         <!-- Now, Left and Center parts reflect page title and page links, let's slide them -->
21.         <div class="left sliding">
22.             <a href="#" class="link back">Home</a>
23.         </div>
24.         <div class="center sliding">About</div>
25.  
26.         <!-- Right part doesn't related to other pages -->
27.         <div class="right">
28.             <a href="#" class="link icon-only">
29.                 <i class="icon icon-bars"></i>
30.             </a>
31.         </div>
32.     </div>
33. </div>

 实例预览

返回链接图标动画化

如果你使用了默认的返回链接（图标+“返回”），你可以使用额外的动画，以使这些链接看起来更像iOS 7外观。为了做到这一点，你需要在App初始化时添加animateNavBackIcon: true参数，然后把含有“back”类和图标的链接放到导航栏的左部。

Dynamic Navbar Events

Dynamic navbar has the following events:

Event Target Description

navbarBeforeInit	Navbar Inner element <div class="navbar-inner">	Event will be triggered when Framework7 just inserts new navbar inner to DOM
navbarInit	Navbar Inner element <div class="navbar-inner">	Event will be triggered after Framework7 initialize navbar
navbarReinit	Navbar Inner element <div class="navbar-inner">	This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
navbarBeforeRemove	Navbar Inner element <div class="navbar-inner">	Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory

Each event data containes useful information with navbar elements and Page Data of related page. For example

1. $$(document).on('navbarInit', function (e) {
2.   var navbar = e.detail.navbar;
3.   var page = e.detail.page
4. });

Now, in the example above we have initialized Navbar elements in navbar variable and related  Page Data in page variable. Lets look on properties of navbar object:

Navbar Properties

navbar.navbarContainer	Link to parent Navbar HTMLElement
navbar.navbarInnerContainer	Link to target Navbar Inner HTMLElement