ionic隐藏tabs(hideTabs)

在ionic项目中，如果构建的是一个tabs项目，那会存在需要在进入下级页面时，隐藏掉底部或者顶部tabs的需求。本文介绍两种方式去实现，一种为通过css控制，另一种为通过设置路由实现。

一、通过CSS隐藏tabs

这种方式主要是通过一个css–>tabs-item-hide来实现，这个css是ionic.css中自带的一个简单的样式。

1.设置tabs标签

<ion-tabs class="tabs-icon-top tabs-color-active-positive {{hideTabs}}" >

...

</ion-tabs>

这里的{{hideTabs}}是在稍后指令里赋值的。

2.指令

.directive('hideTabs',function($rootScope){
    return {
      restrict:'AE',
      link:function($scope){
        $rootScope.hideTabs = 'tabs-item-hide';
        $scope.$on('$destroy',function(){
          $rootScope.hideTabs = ' ';
        })
      }
    }
  })

这里表示在进入时，hideTabs为tabs-item-hide，tabs隐藏，当指令失效时则为空，就是tabs显示。

3.引用指令

在需要的首个页面中，引用指令

<ion-view view-title="d2" hide-tabs>

..

</ion-view>

之前有朋友反应，这样的方式在三级页面中返回到二级页面无效，原因是，如果是二级页面中添加了指令，在三级页面中再次添加指令，会造成上述情况。这样的情况只需要在二级页面中添加，不需要在三级页面中再次添加，因为，在二级页面中进入三级页面中，如果路由在一个views下的话，指令是不会destory的，所以只需要在首个页面中添加指令即可。
另外在二级页面中不能设置cache:false，不然三级页面也会失效，那如果需要设置的情况下，该如何实现隐藏tabs，那就用到下面的方法。

二、设置路由实现隐藏tabs

在tabs的项目中，路由一般为：

 .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

.state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })

在account中进入一个页面，比如d2页面，那么路由为：

.state('tab.d2', {
      url: '/d2',
      views: {
        'tab-account': {
          templateUrl: 'templates/account-detail2.html',
          controller: 'd2Con'
        }
      },
      cache:false
    })

这样进入d2页面，会自带返回按钮，同时tabs也存在，但是这时设置了cache:false，那进入三级页面上时隐藏会失效。这时就需要通过设置路由：

.state('d3',{
     url:'/d3',
     templateUrl:'templates/account-detail3.html',
     controller: 'd3Con'
   })

这样设置的话，d3页面就与account不在一个view中，也不继承tabs了，进入的话就是一个空页面，也不带任何返回按钮。实际就是两个没有关系路由间的跳转。

之前会带有tabs和返回，本质上也是路由的问题，都继承的tabs的路由页面会。这种方式一般不会存在什么特殊情况的问题，但是就是过渡的动画也不在了，如果需要，要自己去实现。

---

有误之处，请望指正。如果还有别的方式，也希望大家能给予交流~谢谢

这是demo代在：https://github.com/MaxBalance/ionic-hideTabs.git