ionic隐藏tabs的方法
更新时间：2016年08月29日 09:49:31 投稿：lijiao
这篇文章主要为大家详细介绍了ionic隐藏tabs的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了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，还遇到的一个问题是：<ion-content>的一部分内容会被隐藏；解决办法：
再次修改directive.js里边的内容，不再使用showTabs：
.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上的<ion-slide>来代替<ion-tabs>,不管是与其它页面的滑动效果，还是slide页面的滑动效果都会很大的提升，特别是在android上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
两个值相加精确指定位数在alert出来，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
本文主要介绍了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
addEventListener()与removeEventListener()解析
这篇文章主要为大家详细介绍了addEventListener()与removeEventListener()，用于处理指定和删除事件处理程序操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
浅谈Javascript中substr和substring的区别
这篇文章主要介绍了Javascript中substr和substring的区别，非常的简单明了，有需要的小伙伴可以来仔细看看。2015-09-09
深入认识JavaScript中的函数...2007-01-01
本篇文章主要介绍了原生JS实现日历组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了javascript简单链式调用,结合具体实例形式模拟jQuery分析了链式调用的原理与具体实现技巧,需要的朋友可以参考下2017-05-05
parseInt函数将其第一个参数转换为一个字符串，对该字符串进行解析，然后返回一个整数或 NaN，这篇文章主要介绍了JavaScript 的 parseInt() 函数,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JS实现网页游戏中滑块响应鼠标点击移动效果,涉及JavaScript针对页面鼠标事件、滚动事件及元素属性等相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了CKeditor富文本编辑器使用技巧之添加自定义插件的方法,结合实例形式分析了CKeditor添加自定义插件的步骤与相关操作技巧,需要的朋友可以参考下2019-06-06
最新评论