离子：评论页面上的自定义标签栏背景颜色？

Question

离子 1.2

我正在尝试在我的应用程序中更改标签栏的背景颜色在特定屏幕上，其中我在标签栏顶部有一个文本输入，类似于 Twitter 的标签栏看起来（见下图）。

换句话说，我想在特定屏幕上将标签栏的背景颜色从黑色更改为白色，否则将标签栏保持为默认的黑色。这个想法类似于将一个类添加到特定屏幕以更改标签栏的样式。

有什么想法吗？非常感谢任何帮助！

Answer 1

您可以使用 ng-style 来做到这一点。

1.) tabs.html

在<ion-tabs> 中添加ng-style="{'background-color': Color}"。

<ion-tabs class="tabs-icon-top tabs-color-active-light" ng-style="{'background-color': Color}">

  //

</ion-tabs>

2.) controllers.js

将$rootScope 添加为依赖项并将$ionicView 添加到每个控制器（在标签栏顶部有文本输入的控制器中使用相同的颜色）。为每个选项卡选择不同的颜色。

$scope.$on('$ionicView.beforeEnter', function() {
  $rootScope.Color = 'red';
  });

3.) style.css

.tabs {
   background-color: inherit;
}