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 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
js实现网页随机验证码
Oct 19 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
使用python实现链表操作
2018/01/26 Python
详解【python】str与json类型转换
2019/04/29 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
库房管理员岗位职责
2014/03/09 职场文书
家长学校实施方案
2014/03/15 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
学校食品安全实施方案
2014/06/14 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
详解MySQL的半同步
2021/04/22 MySQL
Python 视频画质增强
2022/04/28 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL