一个视图中的离子透明导航栏

Question

我正在尝试让导航栏在一个视图中变得透明。但是我在这样做时遇到了麻烦。

这是我的 menu.html

<ion-side-menus enable-menu-with-back-views="true">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable" ng-class="clear">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <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="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

这是我的菜单控制器

  $rootScope.$on('noNavBar', function(){
    $scope.clear = 'bar-light';
    console.log($scope.clear);
  });

这是css

.bar.bar-light {
  background-color: rgba(255,255,255,.66) !important;  or transparent, or background:none
}

.scroll-content {
  overflow: visible !important;
}

是不是导航栏被缓存了？

Answer 1

如果您需要在特定视图中隐藏 nav-bar，请在 <ion-view> 中使用 hide-nav-bar="true"。

如果您需要自定义 nav-bar（即应用特定的 class），请在您想要的带有自定义导航栏的 <ion-view> 内添加一个 <ion-nav-bar> 标签：

<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>

这是一个例子：http://codepen.io/beaver71/pen/XXeydY

一个视图中的离子透明导航栏

Ionic Transparent Nav Bar in one view

angularjs

ionic-framework

ionic-view