如何更简单在子级页面隐藏Ionic tabs
实际的环境是文件路径保存的,还好小伙伴发现的这个问题,摸摸哒。
应该以#号后面的字段来判定是否属于子级页面
2017.01.19
1 | directive('hideTabs', function($rootScope) { |
2017.01.14更新线
只要是子级页面都隐藏tabs指令1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
console.log(String($el["0"].baseURI).split('/').length);
console.log(String($el["0"].baseURI));
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
if(String($el["0"].baseURI).split('/').length - 1 > 5){
$rootScope.hideTabs = 'tabs-item-hide';
} else {
$rootScope.hideTabs = '';
}
});
}
};
});
官方有这么一段话
To hide the tabbar but still show the content, add the tabs-item-hide class. Also, whenever you are using tabs, remember to add the has-tabs CSS class to your ion-content directive.
可以看到官方推荐使用tabs-item-hide类来影藏tab,同时在一级页面的ion-content中除了加has-header以外还应该加上has-tabs才能完美解决首页显示不全的问题
具体做法如下
添加hideTabs指令1
2
3
4
5
6
7
8
9
10
11.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $el) {
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy', function() {
$rootScope.hideTabs = '';
});
}
};
});
在tabs添加ng-class=”$root.hideTabs”1
2
3
4
5
6
7
8<ion-tabs class=" tabs-icon-top tabs-stable tabs-color-positive"
ng-class="$root.hideTabs">
<ion-tab title="全部" icon-off="{{::icons[0].off}}"
icon-on="{{::icons[0].on}}" href="{{::templateUrls[0].href}}" >
<ion-nav-view name="starter-home"></ion-nav-view>
</ion-tab>
.............
</ion-tabs>
在子页面添加hide-tabs属性
1 | <ion-view title="比赛视频" hide-tabs> |