这篇文章主要为大家详细介绍了 ionic 隐藏 tabs 的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1.
- <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}">
- <!-- tabs -->
- </ion-tabs>
2. 在该控制器下加上. directive:
- var module = angular.module('app.directives', []);
- module.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. 在 html 页面中引用 hide-tabs
- <ion-view title="New Entry Form" hide-tabs>
- <!-- view content -->
- </ion-tabs>
4.
当页面返回主页面时,需要再次显示 tabs,则需要在该控制器中加上 (主要是解决 android 上 tabs 还是隐藏的问题):
- $scope.$on('$ionicView.enter',
- function() {
- // 显示 tabs
- $rootScope.hideTabs = false;
- });
5.
我用的是 tabs-top,还遇到的一个问题是:
- .directive('hideTabs',
- function($rootScope) {
- return {
- restrict: 'A',
- link: function(scope, element, attributes) {
- scope.$on('$ionicView.beforeEnter',
- function() {
- scope.$watch(attributes.hideTabs,
- function(value) {
- $rootScope.hideTabs = value;
- });
- });
- scope.$on('$ionicView.beforeLeave',
- function() {
- $rootScope.hideTabs = false;
- });
- }
- };
- })
来个总结吧,相对于 tabs 用法,如果是在底部的话,上边的那些不会有什么太大的问题。但如果是用在顶部的话,涉及到 content,会遇到一点问题。
其实可以考虑使用 ionic 上的
来源: http://www.phperz.com/article/17/0622/332268.html