ionic 隐藏ion-tabs 并解决延迟问题 (tabs)

网上有很多关于隐藏ion-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>

以上3步就可以实现隐藏tabs了，但还是会发现tabs成功隐藏了，然而 ion-content并没有真正的满屏。

通过审核元素会发现在ion-content的class 中还有个has-tabs，只要删除has-tabs就没问题了。

其实要解决这个问题很简单。只要在隐藏tabs的时候 将$scope.$hasTabs属性设置为false（此处重点，前面都是废话。。。）

  $scope.$hasTabs = false;