Ionic 使用 ion-nav-bar 改变导航栏 Header 的背景色

一般情况下,<ion-nav-bar class=”bar-positive”></ion-nav-bar> 会放在 index.html 里,这样其他的页面也会显示头部。如果我们想特定的页面里显示不一样的头部导航,例如不同颜色,那么我们只需要把 ion-nav-bar 放在 ion-view 里即可。

<ion-view>

<ion-nav-bar class="bar-light nav-title-slide-ios7">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-title>{{标题}}</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-clear icon ion-ios-upload-outline" type="button"></button>
</ion-nav-buttons>
</ion-nav-bar>

<ion-content class="has_tabs">

...

</ion-content>

</ion-view>

这里 class=”bar-light” 就使得当前的页面使用了不同于其他页面的  class=”bar-positive” 背景颜色。简单的理解,就是把 ion-nav-bar 放在 ion-view 里,可以替换掉默认的 index.html 里的  ion-nav-bar。然后你可以定义颜色、按钮什么的。

相关文章