ionic 进入二级目录以后隐藏底部导航栏（tabs）-优快云博客

本文介绍了如何使用AngularJS指令实现底部导航栏在特定页面显示或隐藏的方法。具体步骤包括在ion-tabs中添加条件样式、定义自定义指令来监听页面变化，并在需要隐藏导航的页面上设置属性。

2019独角兽企业重金招聘Python工程师标准>>>

有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>

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

//app已经在其他文件中指定，如var app = angular.module("starter",["ionic"])
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .directive('hideTabs', function ($rootScope,$location) {
    return {
      restrict: 'AE',
      link: function (scope, element, attributes) {
        scope.$on('$ionicView.beforeEnter', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = value;
            if ($location.path() == '/main_tab/mian' || $location.path() == '/main_tab/mian') {
              //scope.$on('$ionicView.beforeLeave', function() {
              //  $rootScope.hideTabs = false;
              //});
            }
          })
        })
      }
    }
  })

//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;
            });
        }
    };
});

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>

另外，如果要把效果搞得好看点，没有什么延迟现象，需要改动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;
}

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

转载于:https://my.oschina.net/u/2365397/blog/656684