首页/Ionic/列表

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

来源:  2018-04-03 13:27:29    评论:0点击:

来源:https://blog.csdn.net/jinrui_w/article/details/51505550
场景描述:

点击测试设备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;
    })
})
这样就实现了上述场景描述中的功能。

由于刚开始接触ionic开发,很多东西还不是很懂,说的有些墨迹,见谅...

参考网址:http://www.cnblogs.com/maoyazhi/p/4424039.html

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权