底部tabbar的隱藏
一 底部Tabbar的隱藏在使用ionic開發(fā)項目的時候，難免會用到底部切換菜單狸吞，那么在ionic導(dǎo)航控器中，進(jìn)入到二級頁面，往往我們不需要顯示底部菜單荣赶，那么我們改如何在ionic的導(dǎo)航控制其中隱藏底部菜單呢？那么小編接下來就為大家講解一下鸽斟，其實(shí)只需要三步就能夠做到了拔创。
1.在標(biāo)簽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.你想要隱藏的界面標(biāo)簽ion-view添加表達(dá)式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>
不需要隱藏的頁面需要標(biāo)簽ion-view添加表達(dá)式hide-tabs=”false”：
<ion-view view-title="更多" hide-tabs="false">
<ion-content class="padding"> 更多 </ion-content>
</ion-view>
總結(jié)：以上三個步驟需要第二步需要我們了解一下angularjs的directive的使用方法富蓄，在此小編有一個學(xué)習(xí)地址：http://www.jikexueyuan.com/course/1538.html剩燥，最后附上示例源碼地址：https://github.com/lerpo/Ionic-Demo.git
