如何隐藏Ionic Framework中的选项卡
我选择了离子选项卡视图，因此我可以使用模板系统，但我无法删除选项卡。 我想要一个这样的视图，我确实设法删除标题栏但我不能删除标签栏
这是我到目前为止所得到的：
如果我隐藏标签栏（ ion-tabs{display:none} ），它也会删除内容，这不是我想要的。
我知道这已经得到了回答，但是这样做的“更有棱角的方式”可能会有所帮助。 这是通过使用自定义指令完成的，该指令可以应用于您不希望显示底部选项卡栏的视图。
我的应用程序的解决方案是：
1 – 使用ng-hide绑定到选项卡栏上的rootScope变量，这样我就可以在我的应用程序的任何Controller / View中隐藏/显示它：
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 – 将其应用于不需要显示标签栏的特定视图：
ps ：我认为这可以进一步改进，甚至可以避免在ng-hide ，让指令完成所有“脏工作”。
丹尼尔的答案非常接近（谢谢！），但在我的案例中并不是很有效：
-
ng-hide隐藏选项卡内容以及选项卡（对我来说，无论如何） - 我想通过将表达式传递给指令来有条件地隐藏选项卡。
所以这是我修改过的模板：
指令（再次基于丹尼尔）：
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; }); } }; });
用法：
我使用了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; }); } }; });
希望这可以帮助！ （另外，这是我的第一个答案……所以，如果我完全错过了某些东西，请原谅我的无聊）。
Dunc的答案非常好，但在Ionic的视图缓存方面效果不佳。
使用$ destroy事件，当父视图被拆除时，它将设置$ rootScope变量。
但是，正如其他人所评论的那样，当返回到需要制表符的页面时，这个$ destroy事件发生得太晚了。 这会导致页面转换的延迟跳跃行为。 此外，离子内容.has-tabs类在延迟之后才会添加，因此选项卡也会覆盖任何内容。
相反，我们应该在离开之前重置Ionic事件，以确保转换的摘要周期得到变量的时间变化。
相同的模板：
指令（再次基于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; }); } }; });
用法是一样的 –
要获得奖励，如果您使用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替换为条形高度。
Ng-if是唯一对我有用的指令。
ng-if="$root.showList"
希望能帮助到你。
不幸的是，当前的答案在再次显示标签之前有一个滞后。 看起来美元范围的销毁时间有点晚了，当你去一个应该有标签的页面时，在它们被重新显示之前会有一个滞后。 然而，保罗的链接让我找到了一个没有滞后的更好的解决方案：
app.controller('applicationController', function ($state, $rootScope) { var hideTabsStates = ['tab.inbox-convo']; $rootScope.$on('$ionicView.beforeEnter', function () { $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name) }); });
简单的CSS覆盖对我来说在codepen中起作用 ，我的要求是隐藏子/内部视图的主选项卡，例如弹出视图+这不会影响辅助选项卡：
OR在指令示例中：
angular.element(".tab-nav").css("display":"none");
别忘了：
你需要简单地在页面控制器中放一个简单的代码。
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