Ionic 在指定页面里隐藏选项卡 ion-tabs hideTabs

在一些特定的页面里,例如 搜索页面或产品详细页,我们可能不需要底部的选项卡,那么应该如何隐藏它呢?

一开始我的做法是:


<ion-view hide-tabs>
……
</ion-view>


<ion-tabs class=”tabs-icon-top {{$root.hideTabs}}”> …… </ion-tabs>


.directive(‘hideTabs’, function($rootScope,$state) {
return {
restrict: ‘A’,
link: function($scope, $el, attributes) {
$rootScope.hideTabs = ‘tabs-item-hide’;
$scope.$on(‘$destroy’, function() {
$rootScope.hideTabs = ”;
});
}
};
})


但是发现此方法有个缺陷,就是在两个连续需要隐藏选项卡的页面视图(视图A -> 视图B),当我从视图 A 进入视图 B 后,再返回到视图 A 的时候,隐藏效果就不起作用了。
所以改良后的方案是:


<ion-view hide-tabs=”true”>
……
</ion-view>


<ion-tabs class=”tabs-icon-top” ng-class=”{‘tabs-item-hide’: $root.hideTabs}”> …… </ion-tabs>


// 监听 hide-tabs 属性值

.directive(‘hideTabs’, function($rootScope,$state) {
return {
restrict: ‘A’,
link: function($scope, $el, attributes) {
$scope.$on(‘$ionicView.beforeEnter’, function() {
$scope.$watch(attributes.hideTabs, function(value){
//console.log(‘wacth:’,value);
$rootScope.hideTabs = value;
});
});
$scope.$on(‘$ionicView.beforeLeave’, function() {
$rootScope.hideTabs = false;
});
}
};
})

通过对指令的监听来判断是否存在属性值 hide-tabs=”true”,进而来判断是否显示选项卡。

相关文章