底部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
