jQuery 如何隐藏 Ionic Framework 中的选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23991852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide the tabs in Ionic Framework
提问by Sinan Samet
I chose the ionic tab view so I can use the templating system but I can't remove the tabs. I want a view like this and I did manage to remove the header bar but I cant remove the tabs bar
我选择了离子标签视图，所以我可以使用模板系统，但我无法删除标签。我想要一个这样的视图，我确实设法删除了标题栏，但我无法删除标签栏
This is what I got so far:
这是我到目前为止得到的：
If I hide the tabs bar (ion-tabs{display:none}) it also removes the content, which is not what I want.
如果我隐藏标签栏 ( ion-tabs{display:none})，它也会删除内容，这不是我想要的。
采纳答案by Sly_cardinal
Have a look at the Ionic tab documentation:
查看Ionic 选项卡文档：
To hide the tabbar but still show the content, add the "tabs-item-hide" class.
要隐藏标签栏但仍显示内容，请添加“tabs-item-hide”类。
So you would change this:
所以你会改变这个：
<div class="tabs">
<a class="tab-item" href="#">
Home
</a>
...
</div>
to this:
对此：
<div class="tabs tabs-item-hide">
<a class="tab-item" href="#">
Home
</a>
...
</div>
回答by Daniel Rochetti
I know that this is answered already, but there's a more "angular way" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.
我知道这已经得到了回答，但是有一种更“有角度的方式”可能会有所帮助。它是通过使用自定义指令完成的，您可以将其应用于不想显示底部标签栏的视图。
My solution to this on my app was:
我在我的应用程序上对此的解决方案是：
1 - Use ng-hidebinded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:
1 - 使用ng-hide绑定到选项卡栏上的 rootScope 变量，因此我可以在我的应用程序的任何控制器/视图中隐藏/显示它：
<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:
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 - Apply it to specific views that don't need the tab bar visible:
3 - 将其应用于不需要标签栏可见的特定视图：
<ion-view title="New Entry Form" hide-tabs>
<!-- view content -->
</ion-view>
ps: I think this can be improved even further avoiding the need of the ng-hideon the <ion-tabs>declaration, letting the directive do all the "dirty work".
ps：我认为这可以进一步改进，避免ng-hide在<ion-tabs>声明中使用 ，让指令完成所有“肮脏的工作”。
回答by Dunc
Daniel's answer was very close (thanks!) but didn't quite work in my case:
丹尼尔的回答非常接近（谢谢！），但在我的情况下不太奏效：
ng-hidehides the tab contentas well as the tabs (for me, anyway)- I want to to conditionally hide the tabs by passing an expression to the directive.
ng-hide隐藏选项卡内容以及选项卡（无论如何对我来说）- 我想通过将表达式传递给指令来有条件地隐藏选项卡。
So here's my modified template:
所以这是我修改后的模板：
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
Directive (again based on 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;
});
}
};
});
Usage:
用法：
<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
<!-- view content -->
</ion-view>
回答by Alex Pavia
I used dotfrank's answer and it worked like a charm, except for when I went a few layers deep in a specific tab's view and then used the back button. Going back to a view that has the directive "hideTabs = 'true'" will actually have it set to "false" unless you wrap the $watch on hideTabs in the $ionicView.beforeEnter event.
我使用了 dotfrank 的答案，它的作用就像一个魅力，除了当我在特定选项卡的视图中深入几层然后使用后退按钮时。返回具有指令“hideTabs = 'true'”的视图实际上会将其设置为“false”，除非您将 $watch 包装在 $ionicView.beforeEnter 事件中的 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;
});
}
};
});
Hope this helps! (also, this is my first answer... so if I'm completely missing something, then forgive my noobness).
希望这可以帮助！（另外，这是我的第一个答案......所以如果我完全错过了什么，那么请原谅我的菜鸟）。
回答by dotfrank
Dunc's answer is very good, but does not work the best when it comes to Ionic's view caching.
Dunc 的回答非常好，但在 Ionic 的视图缓存方面效果不佳。
The $destroy event is used which will set the $rootScope variable when the parent view is torn down.
$destroy 事件用于在父视图被拆除时设置 $rootScope 变量。
However, as others have commented, this $destroy event happens too late when returning to a page that needs tabs. This causes a delayed jumpy behavior on page transitions. Additionally, the ion-content .has-tabs class does not get added until after the delay, so any content is covered by the tabs as well.
然而，正如其他人评论的那样，当返回需要选项卡的页面时，这个 $destroy 事件发生得太晚了。这会导致页面转换的延迟跳跃行为。此外，直到延迟之后才会添加 ion-content .has-tabs 类，因此选项卡也覆盖了任何内容。
Instead we should reset on the Ionic event beforeLeave, to ensure the transition's digest cycle gets the variable change in time.
相反，我们应该在离开之前重置 Ionic 事件，以确保转换的摘要循环及时获得变量更改。
Same template:
相同的模板：
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
<!-- tabs -->
</ion-tabs>
Directive (again based on 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;
});
}
};
});
Usage is the same -
用法是一样的——
<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
<!-- view content -->
</ion-view>
For a bonus, if you're using SASS, you can get a nice popup transition for your tab bar if you add this to your .scss file:
作为奖励，如果您使用的是 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;
}
If using vanilla CSS, replace $tabs-height with the height of your bar.
如果使用 vanilla CSS，请将 $tabs-height 替换为栏的高度。
回答by Wasi
You need to simply put a simple code in page controller like this.
您需要像这样简单地在页面控制器中放置一个简单的代码。
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);
});
});
回答by parliament
Unfortunately the current answers have a lag before showing the tabs again. It seems the $scope gets $destroyed a bit late and when you go to a page that should have tabs, there's a lag before they're reshown. However, paul's link brought me to a better solution which has no lag:
不幸的是，当前的答案在再次显示选项卡之前存在滞后。似乎 $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 }">
回答by jlopez
回答by Elroy
Simple CSS override worked for me example in codepen, my requirement was to hide main tabs for child/inner views, e.g popup views + this does not affect secondary tabs:
简单的 CSS 覆盖在 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 in directive example:
OR 在指令示例中：
angular.element(".tab-nav").css("display":"none");
Dont forget:
不要忘记：
<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>
回答by paul.isache
https://github.com/driftyco/ionic/issues/395It appears that the tabs are kind tricky in Ionic. Check the link, it worked great for me
https://github.com/driftyco/ionic/issues/395Ionic 中的选项卡似乎有点棘手。检查链接，它对我很有用
