ionic底部tabbar的隐藏

底部tabbar的隐藏
一 底部Tabbar的隐藏在使用ionic开发项目的时候，难免会用到底部切换菜单，那么在ionic导航控器中，进入到二级页面，往往我们不需要显示底部菜单，那么我们改如何在ionic的导航控制其中隐藏底部菜单呢？那么小编接下来就为大家讲解一下，其实只需要三步就能够做到了。
1.在标签ion-tabs中添加：ng-class=”{‘tabs-item-hide’: $root.hideTabs}” 源码如下：

<ion-tabs class="tabs-icon-top tabs-positive tabs-stable" ng-class="{'tabs-item-hide':$root.hideTabs}"> 
<ion-tab title="主页" icon="ion-ios-home-outline" href="#/tab/home"> 
<ion-nav-view name="home-tab"></ion-nav-view > 
</ion-tab>
 <ion-tab title="商品" icon="ion-social-github-outline" href="#/tab/productList">
 <ion-nav-view name="productList-tab"></ion-nav-view> 
</ion-tab> 
<ion-tab title="购物车" icon="ion-ios-cart-outline" href="#/tab/buycarPage"> 
<ion-nav-view name="buycarPage-tab"></ion-nav-view>
 </ion-tab> 
<ion-tab title="我的淘宝" icon="ion-ios-person-outline" ui-sref="tabs.mytaobao"> 
<ion-nav-view name="mytaobao-tab"></ion-nav-view>
 </ion-tab>
 <ion-tab title="更多" icon="ion-android-more-horizontal" ui-sref="tabs.more"> 
<ion-nav-view name="more-tab"></ion-nav-view>
 </ion-tab>
</ion-tabs>

2.添加angularjs的指令，源码如下：

.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(value) { 
     $rootScope.hideTabs = value;
   });
 }};
})

3.你想要隐藏的界面标签ion-view添加表达式hide-tabs=”true”,源码如下：

<ion-view view-title="尺码,颜色分类" hide-tabs="true" ng-controller="sizeAndColorStyle"> 
<ion-nav-bar class="bar-stable"> 
<ion-nav-back-button class="button-stable"> 返回 </ion-nav-back-button>
 </ion-nav-bar>
</ion-view>

不需要隐藏的页面需要标签ion-view添加表达式hide-tabs=”false”：

<ion-view view-title="更多" hide-tabs="false">
 <ion-content class="padding"> 更多 </ion-content>
</ion-view>

总结：以上三个步骤需要第二步需要我们了解一下angularjs的directive的使用方法，在此小编有一个学习地址：http://www.jikexueyuan.com/course/1538.html，最后附上示例源码地址：https://github.com/lerpo/Ionic-Demo.git