动态导航栏

优质

小牛编辑

132浏览

2023-12-01

Dynamic Navbar is supported only in iOS Theme

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

它只对穿透类型的布局有效
它应该在视图初始化时通过传递dynamicNavbar: true参数来启用

动态导航栏布局

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

默认情况下（如果没有额外的类），每个导航栏部分都具有"渐变"过渡特效
如果你向任何一个导航栏部分添加"sliding"类，它会具有"滑动"特效
为了美观起见，在不同的页面之间，你应当保持同一个过渡类型

默认(渐变)过渡

<!-- Navbar on index page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
  <a href="#" class="link">Home Left</a>
        </div>
        <div class="center">Home</div>
        <div class="right">
  <a href="#" class="link">Home Right</a>
        </div>
    </div>
</div>
 
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
  <a href="#" class="link">About Left</a>
        </div>
        <div class="center">About</div>
        <div class="right">
  <a href="#" class="link">About Right</a>
        </div>
    </div>
</div>

滑动过渡

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

<!-- Navbar on index page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Left part doesn't related to other pages, let's fade it out -->
        <div class="left">
  <a href="#" class="link">Home Left</a>
        </div>
 
        <!-- Center and Right parts reflect page title and page links, let's slide them -->
        <div class="center sliding">Home</div>
        <div class="right sliding">
  <a href="about.html" class="link">About</a>
        </div>
    </div>
</div>
 
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Now, Left and Center parts reflect page title and page links, let's slide them -->
        <div class="left sliding">
  <a href="#" class="link back">Home</a>
        </div>
        <div class="center sliding">About</div>
 
        <!-- Right part doesn't related to other pages -->
        <div class="right">
  <a href="#" class="link icon-only">
      <i class="icon icon-bars"></i>
  </a>
        </div>
    </div>
</div>

返回链接图标动画化

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

Demos

Usual Sliding

With animateNavBackIcon

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

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

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