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

时间:2023-12-23 16:07:50

网上看到很多都是写个指令,监听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">