ionic关于隐藏底部tabs终极解决方案

网上看到很多都是写个指令,监听view进出对tab进行显示隐藏,试过挺多个,自己写了一个,都不是太让人满意,问题大多数为:

1、二级页面是隐藏了tab,但是进去三级视图发现tab又出来了

2、三级,四级view隐藏了tab,但是返回键的时候tab一秒后又跑了出来

参考国外资料,如果只要在首页的几个页面中显示tab,其他页面不显示,建议用下面的方式,很好用,直观,明了

控制器里面写

.controller('TabsCtrl', function($scope, $rootScope, $state) {
        $rootScope.$on('$ionicView.beforeEnter', function() {
		    var statename = $state.current.name;
		    console.log(statename);
			//tabs中存在的主页面不需要隐藏,hidetabs=false
			if(statename ==='tab.circle'||statename ==='tab.help'||statename ==='tab.my'||statename ==='tab.shop'){
			  $rootScope.hideTabs = false;
			}else{
			  $rootScope.hideTabs = true;
			}
        });
})

 tab里面

<ion-tabs class="tabs-icon-top tabs-stable tabs-color-energized" ng-class="{'tabs-item-hide': hideTabs}" ng-controller="TabsCtrl">

html里面

<ion-view hide-tabs="true" view-title="{{title}}" ng-init="circDetail()" cache-view="true">

 

posted @ 2016-06-29 09:12  jtanx  阅读(1606)  评论(0编辑  收藏  举报