ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案


Posted in Javascript onNovember 23, 2016

在有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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
js实现动态显示时间效果
Mar 06 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
详解React 条件渲染
Jul 08 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
JQueryEasyUI之DataGrid数据显示
Nov 23 #Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 #Javascript
jquery实现点击页面回到顶部
Nov 23 #Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 #Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 #Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 #Javascript
JavaScript实现的CRC32函数示例
Nov 23 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
高效课堂教学反思
2016/02/24 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python