Question

我选择了离子选项卡视图，因此我可以使用模板系统，但我无法删除选项卡。我想要一个这样的视图，我确实设法删除标题栏但我不能删除标签栏

enter image description here

这是我到目前为止所得到的：

enter image description here

如果我隐藏标签栏（ion-tabs{display:none}），它也会删除内容，这不是我想要的内容。

Answer 1

我知道这已经得到了回答，但是还有一种更有棱角的方式＆＃34;这样做可能会有所帮助。通过使用自定义指令完成此操作，您可以将该指令应用于您不想显示底部标签栏的视图。

我在我的应用上的解决方案是：

1 - 使用ng-hide绑定到标签栏上的rootScope变量，这样我就可以在我的应用的任何控制器/视图中隐藏/显示它：

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - 创建一个自定义指令，当存在时，将隐藏标签栏（并在视图被销毁/解除时再次显示标签栏：

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - 将其应用于不需要显示标签栏的特定视图：

<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->
</ion-view>

ps ：我认为这可以进一步改进，避免在ng-hide声明中需要<ion-tabs>，让指令完成所有＆＃34;脏工作＆＃34;

Answer 2

查看Ionic tab documentation：

要隐藏标签栏但仍显示内容，请添加“tabs-item-hide”类。

所以你会改变这个：

<div class="tabs">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

到此：

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

Answer 3

丹尼尔的答案非常接近（谢谢！），但在我的案例中并不是很有效：

ng-hide隐藏标签内容以及标签（无论如何，对我来说）
我想通过将表达式传递给指令来有条理地隐藏选项卡。

所以这是我修改过的模板：

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

指令（再次基于Daniel's）：

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function(value){
                $rootScope.hideTabs = value;
            });

            scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

用法：

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

Answer 4

我使用了dotfrank的答案，它就像一个魅力，除了我在特定标签的视图中深入几层，然后使用后退按钮。回到具有指令的视图＆＃34; hideTabs =＆＃39; true＆＃39;＆＃34;实际上它将设置为＆＃34; false＆＃34;除非你在$ ionicView.beforeEnter事件中将$ watch包装在hideTabs上。

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

希望这有帮助！（另外，这是我的第一个答案......所以，如果我完全遗漏了某些东西，请原谅我的无知）。

Answer 5

Dunc的答案非常好，但在Ionic的视图缓存方面效果不佳。

使用$ destroy事件，当父视图被拆除时，它将设置$ rootScope变量。

然而，正如其他人所评论的那样，当返回到需要标签的页面时，这个$ destroy事件发生得太晚了。这会导致页面转换的延迟跳跃行为。此外，离子内容.has-tabs类在延迟之后才会添加，因此任何内容都会被标签覆盖。

相反，我们应该在离开之前重置Ionic事件，以确保转换的摘要周期能够及时改变变量。

相同模板：

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs --> 
</ion-tabs>

指令（再次基于Dunc's）：

.directive('hideTabs', function($rootScope) {
  return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          scope.$watch(attributes.hideTabs, function(value){
              $rootScope.hideTabs = value;
          });

          scope.$on('$ionicView.beforeLeave', function() {
              $rootScope.hideTabs = false;
          });
      }
  };
});

用法是相同的 -

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

要获得奖励，如果您使用SASS，如果将其添加到.scss文件中，则可以为标签栏获得一个不错的弹出式转换：

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

如果使用vanilla CSS，请将$ tabs-height替换为条形高度。

Answer 6

Ng-if是唯一对我有用的指令。

ng-if="$root.showList"

希望它有所帮助。

Answer 7

不幸的是，当前的答案在再次显示标签之前有一个滞后。看起来美元范围的销毁时间有点晚了，当你去一个应该有标签的页面时，在它们被重新显示之前会有一段时间。但是，保罗的链接让我找到了一个没有滞后的更好的解决方案：

app.controller('applicationController', function ($state, $rootScope) {  

    var hideTabsStates = ['tab.inbox-convo']; 

    $rootScope.$on('$ionicView.beforeEnter', function () {
        $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
    });
});

<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">

Answer 8

简单的CSS覆盖对我有用example in codepen，我的要求是隐藏子视图/内部视图的主要选项卡，例如弹出视图+这不会影响辅助选项卡：

<style>
    /* hide the main tabs */
    .tab-nav{
        display: none;
    }
    /* this takes care of the access margins bottom or top tabs */
    .has-tabs, .has-tabs-top, .has-tabs-bottom {
        bottom: 0px !important;
        top: 0px !important;
    }   
</style>

OR在指令示例中：

angular.element(".tab-nav").css("display":"none");

别忘了：

<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>

Answer 9

您只需将一个简单的代码放在这样的页面控制器中即可。

angular
   .module('app.module')
   .controller('pageController', function ($scope, $rootScope, $state, $ionicTabsDelegate) {
    /* hide tabs on page show */
    /* 0 = hide, 1 = show */
    $scope.$on('$ionicView.enter', function() {
        $ionicTabsDelegate.showBar(0);
    });
});

Fugital.com

Answer 10

https://github.com/driftyco/ionic/issues/395 看来这些标签在Ionic中非常棘手。检查链接，它对我很有用

如何隐藏Ionic Framework中的选项卡

10 个答案: