我正在使用离子启动菜单模板。我想更改每个页面的标题背景颜色。我目前有：
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
我试过了：
<ion-view view-title="Search" class="bar bar-header bar-assertive">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
但它根本不起作用（内容未呈现）。 header documentation对我没有帮助。这样做的正确方法是什么？
答案 0 :(得分：56)
有些方法可以做到这一点：
您可以将ion-nav-bar添加到每个视图中。
<ion-view view-title="Page 1">
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content>
...
</ion-content>
</ion-view>
您还可以使用ng-style
更新背景颜色（以及任何其他属性）主导航栏：
<ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
CSS：
.nav-bar-block, .bar {
background-color: inherit !important;
}
控制器：
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.viewColor = 'green';
});
答案 1 :(得分：3)
无法为此找到一个干净的解决方案，但一个黑客可能是使用$stateChangeStart事件并手动设置类名。
angular.module('starter')
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-header-bar'));
switch(next.name) {
case 'tab.chats':
element.removeClass('bar-positive');
element.removeClass('bar-balanced');
element.addClass('bar-calm');
break;
case 'tab.dash':
element.removeClass('bar-calm');
element.removeClass('bar-balanced');
element.addClass('bar-positive');
break;
default :
element.removeClass('bar-calm');
element.removeClass('bar-positive');
element.addClass('bar-balanced');
}
}
});
});
修改 侧边栏模板的想法相同，
注意这一行
<ion-nav-bar class="bar-positive">
，它表示基本标题颜色类。
但是后续对页面的更改，即状态标题颜色需要在$stateChangeStart事件中手动更改，
代码：
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
console.log(element);
switch(next.name) {
case 'app.search':
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-dark');
element.addClass('bar-assertive');
break;
case 'app.browse':
element.removeClass('bar-calm');
element.removeClass('bar-assertive');
element.removeClass('bar-dark');
element.addClass('bar-energized');
break;
default :
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-assertive');
element.addClass('bar-dark');
}
}
});
});
app.search 希望这会有所帮助。
答案 2 :(得分：1)
如果你使用不同的状态，并且每个状态都有一个不同的控制器，而不是像$scope.stateone = "true"那样有一个$ scope变量等。然后在你的离子导航栏上使用ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"。 ng-class接受类和表达式，无论哪个表达式为true，都是指定的类。你可以将ng-class与任何布尔表达式一起使用。这就是你如何在每个页面上使用不同的颜色。
答案 3 :(得分：1)
我修改了@shakib的解决方案以满足我的需求，在我的情况下，用户通过单击应用徽标来设置主题，因此栏颜色应该更改。如果是这种情况，您不需要执行switch case，因为您想要更改所有视图
$rootScope.$on("$stateChangeStart", function (event, toState) {
var element;
if (toState.name){
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
if (debugMode) console.log(element);
// I get the bar-class from my localStorage where I keep the user settings
var saved_bar_class = $localStorage.get('bar-class','bar-calm');
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass(saved_bar_class);
// Here We could use a Switch Case on toState.name to put a different color to each state
}
});
此外，当用户点击应用徽标时，我想立即更改条形颜色，以便向用户反馈该按钮的功能。上面的代码不会这样做，因为我们还没有更改状态，修复此问题只需将此代码添加到“更改主题”功能
$scope.changeAppTheme = function () {
var element;
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
// some code to select the theme
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass('bar-pink');
// some other code
};
在这种情况下，我只有两种颜色，离子平静和我定义的粉红色 希望这有助于某人
答案 4 :(得分：1)
我们在CSS中使用：
.title.title-center.header-item {
background-color: black;
margin: 0px;
}
这意味着我们只是直接用这个CSS引用Angular生成的头类。希望这有帮助！
答案 5 :(得分：0)
尝试使用以下代码：
<ion-view>
<ion-header-bar class="bar-assertive">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
答案 6 :(得分：0)
您可以覆盖$bar-stable-text color（取自_variables.scss的{{1}}）
例如，在你的scss更改中
ionic lib答案 7 :(得分：0)
将这些行放在style.css下离子项目的/www/css/目录下
.title.title-center.header-item {
background-color:#4a87ee;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
答案 8 :(得分：0)
class MyView(ListView):
model = Product
template_name = 'templates/products.html'
答案 9 :(得分：0)
如果您在应用程序中使用scss，则可以创建自己的自定义栏类并在其中使用ionic's bar mixins。
$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);
.bar {
&.bar-custom {
@include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
}
.button {
@include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
}
定义课程后，您可以使用新的自定义栏类和ion-nav-bar指令。
<ion-nav-bar class="bar-custom">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>