更改页面加载离子的导航栏颜色
Changing nav-bar color on page loads ionic
嗨,我想在每次页面加载时更改nav-bar
的颜色,所以我尝试了这个: 在菜单中.html :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="{{headerClass}}">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header">
<ion-list>
<ion-item ui-sref="menu.home" menu-close="" class="item-icon-left"><i class="icon ion-home assertive"></i>Persée</ion-item>
<ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
<ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
<ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
<ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"><i class="icon ion-help calm"></i>FAQ</ion-item>
<ion-item ui-sref="connexion" menu-close="" class="item-icon-left"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
在控制器中.js :
angular.module('app.controllers', [])
.controller('homeCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-assertive';
})
.controller('reportingCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-balanced';
})
.controller('mediathequeCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-energized';
})
.controller('offreSFRCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-royal';
})
.controller('FAQCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-calm';
})
.controller('connexionCtrl', function($rootScope, $scope) {
})
谢谢!!
您可以在
每次页面更改时更改导航栏的标题栏颜色
.run(function($rootScope, $location) {
$rootScope.$on('$locationChangeStart', function(event, next, current) {
if ($location.path() == '/menu/home') {
$rootScope.headerClass = 'bar-assertive';
} else if ($location.path() == '/menu/reporting') {
$rootScope.headerClass = 'bar-balanced';
} else if ($location.path() == '/menu/mediatheque') {
$rootScope.headerClass = 'bar-energized';
} else if ($location.path() == '/menu/offreSFR') {
$rootScope.headerClass = 'bar-royal';
} else if ($location.path() == '/menu/FAQ') {
$rootScope.headerClass = 'bar-calm';
}else{
$rootScope.headerClass = 'bar-assertive';
}
});
})
例
或者,您可以在每个view
中添加ion-nav-bar
菜单.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="menu"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header">
<ion-list>
<ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
<ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
<ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
<ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
<ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
<ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
首页.html
<ion-view title="Persée" cache-view="false">
<ion-nav-bar class="bar-assertive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
正在重新发布.html
<ion-view title="Reporting">
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
媒体中心.html
<ion-view title="Mediatheque">
<ion-nav-bar class="bar-energized">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
offreSFR.html
<ion-view title="Offre SFR" cache-view="false">
<ion-nav-bar class="bar-royal">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
常见问题.html
<ion-view view-title="FAQ">
<ion-nav-bar class="bar-calm">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
相关文章:
- (html/css/javascript)试图使导航栏中的“当前页面”链接变成不同的颜色
- 如何获得不同的导航栏颜色
- 如何使导航栏透明,然后使用bootstrap 3更改颜色.(粘贴)
- 更改页面加载离子的导航栏颜色
- 引导更改导航栏 .活动背景颜色
- 尝试添加一个按钮,每次按下按钮时都会更改导航栏的背景颜色
- 导航栏位于页面顶部时的颜色不同
- 导航选项卡保持一定的颜色
- 如何在滚动时仅更改导航的背景颜色,而不更改文本和徽标不透明度
- 悬停时更改导航栏中文本的颜色
- 当我使用jQuery Mobile的UI时,如何在jQuery Mobile中切换单击的导航按钮颜色
- Jquery更改导航链接鼠标悬停的背景颜色
- jQuery-在某个点更改导航栏的颜色
- 关闭颜色框并从父页面导航到其他页面
- 滚动到顶部JQUERY时更改导航背景颜色
- 切换菜单jQuery时更改导航栏背景颜色
- 为Jquery移动导航栏设置不同的颜色
- 想要在滚动到特定元素时更改导航颜色
- 导航颜色问题
- 为什么导航颜色不变