1. 程式人生 > >ionic 隱藏tabs下導航欄

ionic 隱藏tabs下導航欄

兩步

1.在導航欄頁 tabs.html裡新增一句話

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
    <ion-tab title="首頁" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/shopIndex">
    <ion-nav-view name="tab-shopIndex"></ion-nav-view>
    </ion-tab>

    <ion-tab title="分類" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/fenlei">
   <ion-nav-view name="tab-fenlei"></ion-nav-view>
    </ion-tab>

    <ion-tab title="購物車" icon-off="ion-ios-cart-outline" icon-on="ion-ios-cart" href="#/tab/gouwuche">
    <ion-nav-view name="gouwuche"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/personCenter">
   <ion-nav-view name="person-center" ></ion-nav-view>
    </ion-tab>
</ion-tabs>

2.在需要隱藏的頁面對應的控制器中

$rootScope.hideTabs = true;//隱藏下邊導航欄

$rootScope.hideTabs = false;//展示下邊導航欄

注:記得注入服務

angular.module('personCenter', ["ionic"])
  .controller("personCenterCtl",function($rootScope){