ionic开发中页面跳转隐藏ion-tabs

最新推荐文章于 2020-07-21 14:36:16 发布

原创最新推荐文章于 2020-07-21 14:36:16 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

ionic 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Ionic应用中实现底部导航栏的显示与隐藏功能。通过在不同页面加载时控制全局变量来达到切换效果。

场景描述：

点击测试设备1跳转到设备详情页，在设备详情页隐藏底部的标题栏ion-tabs，当页面从设备详情页返回到主页时，显示底部标题栏。

具体步骤：

1.在ion-tabs后添加

ng-class="{'tabs-item-hide': $root.hideTabs}"

2.在app.js中添加

.directive('showTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = false;
    }
  };
})
.directive('hideTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = true;
    }
  };
})

3.隐藏，在设备详情页中的ion-view后添加

hide-tabs

4.显示，在主页的控制器中添加

$scope.$on('$ionicView.enter', function () {
    // 显示 tabs
    $rootScope.hideTabs = false;
})

注意：此处要在function后添加$rootScope，代码如下

.controller('homeController',function($scope,$rootScope){
    $scope.title='主页'

    $scope.items = [];
    for(var i=0;i<10;i++)
        $scope.items.push(["测试设备 ",i+1].join(""))


    $scope.$on('$ionicView.enter', function () {
        // 显示 tabs
        $rootScope.hideTabs = false;
    })
})