ionic 二级页面隐藏自带的底部导航
来源:互联网 发布:黑客帝国4矩阵复活剧照 编辑:程序博客网 时间:2024/06/05 03:22
这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了AngularJS的指令,要完成这个步骤分为三步
1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}"></ion-tabs>
2.添加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 = value; }); }); scope.$on('$ionicView.beforeLeave',function() {$rootScope.hideTabs =false; }); } };});
3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下:
<ion-viewhide-tabs="true"view-title="{{chat.name}}"><ion-contentclass="padding"><imgng-src="{{chat.face}}"style="width: 64px; height: 64px"><p> {{chat.lastText}}</p></ion-content></ion-view>
另外,如果要把效果搞得好看点,没有什么延迟现象,需要改动ionic.css文件,改动他需要用scss,这些内容前面也有介绍,改动地方如下:
.tabs { -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}.tabs-item-hide > .tabs{ -webkit-transition: all linear 0.2s; transition: all linear 0.2s; bottom: -$tabs-height; display: flex;}
上面内容在tabs.scss文件中!
阅读全文
0 0
- ionic 二级页面隐藏自带的底部导航
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
- 【Android】底部弹出的DialogFragment,支持从右向左push二级页面,自带弹出时折叠动画
- ionic 隐藏ion-tabs底部导航 hide-tabs
- ionic 隐藏ion-tabs底部导航 hide-tabs
- ios页面自带的头部、底部bar的使用
- 隐藏导航栏底部横线 隐藏navigationBar底部的线
- ionic中导航条的隐藏
- PopupWindow 在华为手机等某些自带虚拟导航栏底部被挡住的解决
- 隐藏导航条底部的横线
- 隐藏/改变导航条底部的黑线
- 显示、隐藏导航的底部边线
- react native 的底部导航栏以及跳转页面带参数
- 大数据-医疗行业
- #515. 「LibreOJ β Round #2」贪心只能过样例 背包+bitset优化
- 20个正则表达式,让js校验不在难
- JS函数
- 继承LinkedHashMap实现自定义HashMap设定条件触发删除eldest元素
- ionic 二级页面隐藏自带的底部导航
- 如何运行vue项目
- DAY3 T3
- 20170713
- python 进程的使用、multiprocessing、Process
- java.lang.NoClassDefFoundError 和 java.lang.ClassNotFoundException 错误分析
- Docker中实现redis分片
- HTTP协议知多少-关于http1.x、http2、SPDY的相关知识
- Calendar 获取下周一的日期