如何在离子中隐藏标题栏？答案

【问题标题】：How to hide header bar in ionic?如何在离子中隐藏标题栏？
【发布时间】：2016-05-05 08:36:15
【问题描述】：

我想去掉顶部的蓝色条。

当我使用 hide-nav-bar="true" 或从 html 中删除标题时会发生这种情况。

我只希望选项卡在其上方没有任何蓝色条的情况下存在。

标签：

<ion-tabs class="tabs-striped tabs-color-positive" >
    <ion-tab icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
        <ion-nav-view name="home-tab" >
        </ion-nav-view>
    </ion-tab>
    <ion-tab  icon-on="ion-ios-keypad" icon-off="ion-ios-keypad-outline" ui-sref="tabs.app">
        <ion-nav-view name="app-tab">
        </ion-nav-view>
    </ion-tab>
    <ion-tab  icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="tabs.setting">
        <ion-nav-view name="setting-tab">
        </ion-nav-view>
    </ion-tab>
</ion-tabs>

首页：

<ion-view>
<ion-header-bar class="bar-positive">
<h1 class="title">HOME</h1>
</ion-header-bar>
<ion-content class="padding">
some html....
</ion-content>
</ion-view>

【问题讨论】：

你能显示一些代码吗？
@PareshGami ：我已经更新了问题

标签： ionic-framework ionic-view

【解决方案1】：

检查这个例子：

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
          templateUrl: 'templates/home.html'
        }
      }
    })
    .state('tabs.app', {
      url: '/app',
      views: {
        'app-tab': {
          templateUrl: 'templates/app.html'
        }
      }
    })
    .state('tabs.setting', {
      url: '/setting',
      views: {
        'setting-tab': {
          templateUrl: 'templates/setting.html'
        }
      }
    });

   $urlRouterProvider.otherwise('/tab/home');

});

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example no NAV BAR</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>
  <ion-nav-bar></ion-nav-bar>
  <ion-nav-view animation="slide-left-right" hide-nav-bar="true"></ion-nav-view>

  <script id="templates/tabs.html" type="text/ng-template">
    <ion-view >
      <ion-tabs class="tabs-striped tabs-color-positive tabs-top">
        <ion-tab icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
          <ion-nav-view name="home-tab">
          </ion-nav-view>
        </ion-tab>
        <ion-tab icon-on="ion-ios-keypad" icon-off="ion-ios-keypad-outline" ui-sref="tabs.app">
          <ion-nav-view name="app-tab">
          </ion-nav-view>
        </ion-tab>
        <ion-tab icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="tabs.setting">
          <ion-nav-view name="setting-tab">
          </ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </ion-view>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view title="Home" hide-nav-bar="true">
      <ion-content padding="true">
        <p>Test</p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/app.html" type="text/ng-template">
    <ion-view hide-nav-bar="true">
      <ion-content padding="true">
        <h3>Create hybrid mobile apps with the web technologies you love.</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
      </ion-content>
    </ion-view>
  </script>
  
  <script id="templates/setting.html" type="text/ng-template">
    <ion-view hide-nav-bar="true">
      <ion-content padding="true">
        <h3>setting</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
      </ion-content>
    </ion-view>
  </script>

</body>

</html>

【讨论】：

我不明白你的帖子。你应该解释一下
只是在<ion-nav-view> 元素和每个<ion-view> 上将属性hide-nav-bar 设置为"true"。此外，指定 <ion-nav-bar></ion-nav-bar> 也很重要，即使它是空的。
查看codepen.io/beaver71/pen/zNWRJV，我在其中评论了<ion-nav-bar></ion-nav-bar>这一行

【解决方案2】：

用户 hide-nav-bar="true" 在该控制器的视图中

【讨论】：

这应该是公认的答案。您甚至可以传入条件/范围变量，即hide-nav-bar="userLoggedIn"

【解决方案3】：

在 ion-view 标签中添加 'hide-nav-bar="true"'..like this 它有效

【讨论】：