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}" > < /ion-tabs >

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

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文件中！