ionic中导航栏讲解

一、导航视图 : ion-nav-view

这个视图用于在公共页面声明用于显示子页面的详情。

二、模板视图 : ion-view

尽管在模板视图中可以随便写 HTML，但是，在 ionic 中，我们总是使用指令  ion- -w view 来 作
为模板视图内容的容器，这是为了与 ionic 的导航框架保持兼容：

ion- -w view  指令有一些可选的属性：
  view- - title - 视图标题文字
模板被载入导航视图  ion- - nav- -w view 显示时，这个属性值将显示在导航栏  ion- - nav- -r bar 中

  cache- - view - 是否对这个模板视图进行缓存
允许值为：true | false，默认为 true

  hide- - back- - button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时，如果之前有其他的模板，那么在导航栏  ion- - nav- -r bar 上默认会自
动 显示返回按钮（使用指令  ion- - nav- - back- -n button 定义）。点击该按钮将返回前一个模板。
hide-back-button 的允许值为：true | false ，默认为 false
注意： ：必须在导航栏中显式地声明返回按钮，否则即使将hide-back-button属性设为false，
这个按钮也不会出现:-)

  hide- - nav- - bar - 是否隐藏导航栏
允许值为：true | false ,默认为 false

三、导航栏 : ion-nav-bar

ion- - nav- -r bar 指令用来声明一个居于屏幕顶端的导航栏，它的内容随导航视图 的状态变化
而自动同步变化：这个指令用于公共html界面定义为公共导航栏
<ion-nav-bar></ion-nav-bar>

四、 回退按钮 : ion- - nav- - back- - button

ionic 的指令  ion- - nav- - back- -n button 指令可以自动地让你回退到前一个视图：用于ion-nav-bar中
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
当视图切换时，回退按钮会自动出现在导航条中，并显示前一个视图 的标题。点击回退按
钮将返回前一个视图。

ion- - nav- - back- -n button  定制样式
我们可以定制回退按钮的图标、文本和样式：
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios-arrow-back"></i> 返回
</ion-nav-back-button>

五、视图特定按钮 : ion- - nav- -buttons

用于在特定界面生命不懂的导航栏样式

在  ion- -w view 指令声明的元素内使用  ion- - nav- -s buttons 指令 添加一组按钮，ionic
的导航框架看到这个指令时，就会自动地将这些按钮 安置到导航栏中。
指令  ion- - nav- -s buttons 必须是指令  ion- -w view 的直接后代：
<ion-view>
<ion-nav-buttons>
<!--按钮定义-->
</ion-nav-buttons>

</ion-view>

六、定制标题内容 : ion- - nav- - title

改变不同界面的标题，在ion-view中进行声明

导航栏中默认显示所载入模板视图的 view-title 属性值，但 ionic 允许我们使用
ion- - nav- -e title 指令，使用任意的 HTML 片段改变它！
ion- - nav- -e title 必须是  ion- -w view 的 直接后代