我选择了离子标签视图，因此我可以使用模板系统，但我无法删除标签。我想要这样的视图，我确实设法删除了标题栏，但我无法删除标签栏
这是我目前得到的：
如果我隐藏标签栏 (ion-tabs{display:none})，它也会删除内容，这不是我想要的。
【问题讨论】：
标签： jquery css ionic-framework
要隐藏标签栏但仍显示内容，请添加“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>
【讨论】：
ion-tabs 指令实现相同的功能？
我知道这个问题已经得到解答，但是有一种更“有角度的方式”可以做到这一点，这可能会有所帮助。 这是通过使用自定义指令来完成的，您可以将其应用于您不想显示底部标签栏的视图。
我在我的应用上对此的解决方案是：
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：我认为这可以进一步改进，避免在 <ion-tabs> 声明中使用 ng-hide，让指令完成所有“脏活”。
【讨论】：
https://github.com/driftyco/ionic/issues/395 似乎 Ionic 中的选项卡有点棘手。 检查链接，它对我很有用
Daniel 的回答非常接近（谢谢！），但在我的情况下不太有效：
ng-hide 隐藏标签 content 以及标签（对我来说，无论如何）这是我修改后的模板：
<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>
【讨论】：
$state.current.name，然后在回调中对照fromState.name 和toState.name 检查您是否要离开/进入：github.com/angular-ui/ui-router/wiki#state-change-events
不幸的是，当前的答案在再次显示标签之前存在滞后。似乎 $scope 被 $destroyed 有点晚了，当你转到一个应该有标签的页面时，在重新显示它们之前会有一个延迟。然而，保罗的链接给我带来了一个没有滞后的更好的解决方案：
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 }">
【讨论】：
【讨论】：
Dunc 的回答非常好，但在 Ionic 的视图缓存方面效果不佳。
使用 $destroy 事件，它会在父视图被拆除时设置 $rootScope 变量。
然而，正如其他人评论的那样，当返回到需要标签的页面时，这个 $destroy 事件发生得太晚了。这会导致页面转换时出现延迟的跳跃行为。此外，直到延迟之后才会添加 ion-content .has-tabs 类，因此选项卡也会覆盖任何内容。
相反，我们应该在 Ionic 事件 beforeLeave 上重置，以确保转换的摘要循环及时获得变量变化。
同一个模板：
<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;
}
如果使用原生 CSS，请将 $tabs-height 替换为条形的高度。
【讨论】：
我使用了 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;
});
}
};
});
希望这会有所帮助！ （另外，这是我的第一个答案......所以如果我完全错过了什么，请原谅我的菜鸟）。
【讨论】：
简单的 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>
【讨论】：
您只需像这样在页面控制器中放置一个简单的代码。
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);
});
});
【讨论】：