ionic 進入二級目錄以後隱藏底部導航欄（tabs）

公司開始使用ionic開發項目，在此記錄下把遇到的問題，網上有大牛已經把解決方法整出來了，不過記錄在自己這裏方便查閱。 
這篇記錄在有tabs的項目裏，進入子層級時，底部導航還一直存在，本人是要讓他只在首頁幾個界面存在，其他的隱藏，在這裏用到了angularjs的指令，要完成這個步驟分爲三步：

1. 在標籤ion-tabs中添加：ng-class=”{‘tabs-item-hide’: $root.hideTabs}”，源碼如下：

<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">

//tabs

</ion-tabs>

• 1
• 2
• 3
• 4
• 5

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

//app已經在其他文件中指定，如var app = angular.module("starter",["ionic"])
app.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() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

3.三你想要隱藏的界面標籤 ion-view添加表達式hide-tabs=”true”,源碼如下：

//這是官網模板中的文件
<ion-view hide-tabs="true" view-title="{{chat.name}}">

  <ion-content class="padding">

    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.lastText}}
    </p>
  </ion-content>
</ion-view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

現在體驗下效果吧！ 
另外，如果要把效果搞得好看點，沒有什麼延遲現象，需要改動ionic.css文件，改動他需要用scss，這些內容前面也有介紹，改動地方如下：

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

上面內容在tabs.scss文件中！ 

原網址:http://blog.csdn.net/shenshucong520/article/details/48287811