Ionic Methods of hiding tabs _javascript techniques

This article for everyone to share the Ionic hidden tabs method for everyone to refer to, the specific content as follows

1.

 <ion-tabs ng-class= "{' Tabs-item-hide ': $root. hidetabs}" >
<!--tabs-->

2.
Under the Controller, add. directive:

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.
Referencing Hide-tabs in an HTML page

<ion-view title= "New Entry Form" hide-tabs>
  <!--view content-->
</ion-tabs> 

4.

When the page returns to the main page, you need to display tabs again, and you need to add to the controller (primarily to troubleshoot Android tabs or hidden problems):

$scope. $on (' $ionicView. Enter ', function () {
  //Show Tabs
  $rootScope. Hidetabs = false;
}); 

5.
I'm using Tabs-top, and one of the problems I've encountered is that part of:<ion-content> will be hidden; solution:
Modify the contents of the Directive.js again, and no longer use ShowTabs:

. 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;})
 

To sum up, as opposed to tabs usage, if it is at the bottom, there is no big problem with those above. But if it's used at the top, there's a bit of a problem when it comes to content.

In fact, you can consider using the ionic on the <ion-slide> to replace <ion-tabs>, whether it is with other pages sliding effect, or slide page sliding effect will be greatly improved, especially on Android.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.