ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
更新时间：2016年11月23日 11:46:12 作者：ARKHAM
这篇文章主要介绍了ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案,在文章中用到了angularjs的指令知识点，对ionic隐藏底部导航栏知识感兴趣的朋友一起学习吧
在有tabs的项目里，进入子层级时，底部导航还一直存在，本人是要让他只在首页几个界面存在，其他的隐藏，在这里用到了angularjs的指令，要完成这个步骤分为三步：
在标签ion-tabs中添加：ng-class=”{‘tabs-item-hide': $root.hideTabs}”，源码如下
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
//tabs
</ion-tabs>
添加angularjs的指令，源码如下：
//app已经在其他文件中指定，如var app = angular.module("starter",["ionic"])
app.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 = 'tabs-item-hide';
});
});
scope.$on('$ionicView.beforeLeave', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = 'tabs-item-hide';
});
scope.$watch('$destroy',function(){
$rootScope.hideTabs = false;
})
});
}
};
});
在想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下：
//这是官网模板中的文件
<ion-view hide-tabs="true" view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>
以上所述是小编给大家介绍的ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JavaScript对象中的可扩展性指的是：是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的，对于宿主对象，则由JavaScript引擎决定2022-11-11
初学者不建议看，这些都是用类实现的代码，高手推荐学习2008-10-10
JavaScript 发布订阅模式（Publish/Subscribe Pattern）是一种常用的设计模式，发布订阅模式的核心思想是解耦事件的发生和事件的处理，本文将介绍 JavaScript 发布订阅模式的基本原理、应用场景以及各场景的代码示例,需要的朋友可以参考下2023-05-05
获取JavaScript用户自定义类的类名称的代码...2007-03-03
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
这篇文章主要介绍了bootstrap-treeview实现多级树形菜单，后台JSON格式如何组织，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了javascript中的RegExp对象知识点，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下2015-11-11
JS实现的一个比较不错的判断节假日的实现代码(假日包括周末，不包括调休上班的周末)
最近需要实现一个判断今天是不是节假日的功能,考虑周末与法定节假日调休等,这样的比较完整的功能就需要下面的代码来实现了2024-05-05
这篇文章主要为大家详细介绍了Openlayers实现聚合标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了基于JavaScript实现网红太空人表盘的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
本篇文章给大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解，对此有兴趣的读者们参考学习下吧。2018-02-02
最新评论