如何隐藏Ionic Framework中的选项卡

Question

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

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

如果我隐藏标签栏(ion-tabs{display:none}),它也会删除内容,这不是我想要的.

Answer 1

我知道这已经得到了回答,但是这样做有一种更有用的"角度方式"可能会有所帮助.这是通过使用自定义指令完成的,该指令可以应用于您不希望显示底部选项卡栏的视图.

我的应用程序的解决方案是:

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>声明,让指令做所有的"脏活".

Answer 2

看看Ionic选项卡文档:

要隐藏标签栏但仍显示内容,请添加"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

丹尼尔的答案非常接近(谢谢!),但在我的案例中并不是很有效:

1. ng-hide隐藏选项卡内容以及选项卡(对我来说,无论如何)
2. 我想通过将表达式传递给指令来有条件地隐藏选项卡.

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

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

指令(再次基于丹尼尔):

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的答案,它就像一个魅力,除了我在特定标签的视图中深入几层,然后使用后退按钮.回到具有指令"hideTabs ='true'"的视图实际上将其设置为"false",除非您在$ 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的):

.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替换为条形高度.