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

Question

我想摆脱顶部的蓝色条带。

当我使用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>

Answer 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> 

Answer 2

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

Answer 3

在离子视图标签中添加'hide-nav-bar =“true”'。就像它有效一样