This article shares with you the method of ionic hiding tabs for your reference. The specific content is as follows
1.
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"><!-- tabs --></ion-tabs>2.
Add .directive to this controller:
var module = angular.module('app.directives', []);module.directive('showTabs', function ($rootScope) { return { restrict: 'A', link: function ($scope, $el) { $rootScope.hideTabs = false; } };}).directive('hideTabs', function ($rootScope) { return { restrict: 'A', link: function ($scope, $el) { $rootScope.hideTabs = true; } };})3.
Reference hide-tabs in html page
<ion-view hide-tabs> <!-- view content --></ion-tabs>
4.
When the page returns to the main page, tabs need to be displayed again, and you need to add them to the controller (mainly to solve the problem of tabs or hidden on Android):
$scope.$on('$ionicView.enter', function () { // Show tabs $rootScope.hideTabs = false;});5.
I am using tabs-top, and another problem I encountered is: part of the content of <ion-content> will be hidden; solution:
Modify the content in directive.js again and no longer use showTabs:
.directive('hideTabs', function ($rootScope) { return { restrict: 'A', link: function (scope, element, attributes) { scope.$on('$ionicView.beforEnter', function () { scope.$watch(attributes.hideTabs, function (value) { $rootScope.hideTabs = value; }); }); scope.$on('$ionicView.beforeLeave', function () { $rootScope.hideTabs = false; }); } };})Let’s summarize. Compared with the usage of tabs, if it is at the bottom, the above ones will not have any big problems. But if it is used on the top, it will encounter some problems when it comes to content.
In fact, you can consider using <ion-slide> on ionic instead of <ion-tabs>. Whether it is the sliding effect with other pages or the sliding effect of slide pages, it will be greatly improved, especially on Android.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.