1.在标签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>

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-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.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文件中!

ionic 进入二级目录以后隐藏底部导航栏(tabs)的更多相关文章

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

    公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...

  2. UIScrollView滚动时隐藏底部导航栏问题

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滚动"); int currentPostio ...

  3. ionic2 跳转子页面隐藏底部导航栏

    第一种方法: 在tab里面添加一个属性[tabsHideOnSubPages]='true' <ion-tab [root]="tab1Root" [tabsHideOnSu ...

  4. Android应用-底部导航栏的使用

    目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...

  5. vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显 ...

  6. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  7. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

  8. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  9. Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏

    在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示:   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...

随机推荐

  1. Spring的远程调用

    Spring远程支持是由普通(Spring)POJO实现的,这使得开发具有远程访问功能的服务变得相当容易 四种远程调用技术: ◆ 远程方法调用(RMI) ◆ Caucho的Hessian和Burlap ...

  2. 插头dp练习

    最近学了插头dp,准备陆续更新插头dp类练习. 学习论文还是cdq那篇<基于连通性状态压缩的动态规划问题>. 基本的想法都讲得很通透了,接下来就靠自己yy了. 还有感谢kuangbin大大 ...

  3. Luogu P3362 Cool loves shaxian 生成函数

    题意: 定义f(i)=∑ k∣i k^d(i≤n),给出q个询问,每个询问询问区间[l,r]的f(i)的和. n<=1e7 d<=1e18 q<=5e4 可以发现f(i)是个积性函数 ...

  4. BZOJ 1433 [ZJOI2009]假期的宿舍(网络流)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1433 [题目大意] 在校学生有自己的床,外校的则没有,如果两个同学相互认识,则可以借用 ...

  5. “过时”的SpringMVC我们到底在用什么?深入分析DispatchServlet源码

    之前已经分析过了Spring的IOC(<零基础带你看Spring源码--IOC控制反转>)与AOP(<从源码入手,一文带你读懂Spring AOP面向切面编程>)的源码,本次就 ...

  6. OpenVPN设置客户端固定IP

    在使用openvpn的过程中,多台客户端连接上同一台openvpn服务器之后,客户端的的IP地扯经常变动,导致客户端之间无法正常通讯,openvpn的版本变动也导致了固定IP地扯的配置不同,用以下方法 ...

  7. CF 256C Furlo and Rublo and Game【博弈论,SG函数】

    暴力的求SG函数会超时,正解是先处理出10^6以内的SG值,对于更大的,开根号之后计算出. 小数据观察可以发现sg函数值成段出现,而且增长速度很快,因此可以计算出来每一段的范围,只需打表即可. Nim ...

  8. Web安全开发指南--数据验证

    1.数据验证 4.1.输入数据验证安全规则 1 数据验证必须放在服务器端进行. 2 至少对输入数据的数据类型.数据范围和数据长度进行验证. 3 所有来自不可信数据源(比如网络.用户命令.数据库和文件系 ...

  9. HDU 4632 Palindrome subsequence (2013多校4 1001 DP)

    Palindrome subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65535 K (Java/ ...

  10. Winfrom 使用TabControl控件模拟程序向导步骤

    .NET : 隐藏TabControl的标签栏   在给应用程序添加一个向导的做法有很多,但其中比较简便易行的是使用TabControl.如下图所示 但有一个小小的美中不足,就是:作为向导而言,我们可 ...