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. Eclipse有助于提高开发速度的快捷键

    用Eclipse已经很长一段时间了,自己常用的几个快捷键也已经很熟,但还是有一些自己不经常在开发中使用,但非常使用的快捷键,记录下来,以后利用来提高开发效率. 1.ctrl + shift + r   ...

  2. 洛谷——P1478 陶陶摘苹果(升级版)

    题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力 ...

  3. 【BZOJ 1815】【SHOI 2006】color 有色图

    http://www.lydsy.com/JudgeOnline/problem.php?id=1815 这道题好难啊,组合数学什么根本不会啊qwq 题解详见08年的Pólya计数论文. 主要思想是只 ...

  4. qsc round#2 喵哈哈村的排队(本辣鸡想七想八的,特写此博文给自己一个提醒)

    该oj是qsc自己写的比赛,友情链接:http://qscoj.cn/ 喵哈哈村的排队 发布时间: 2017年2月26日 16:13   最后更新: 2017年2月26日 16:14   时间限制: ...

  5. Codeforces 804D Expected diameter of a tree(树形DP+期望)

    [题目链接] http://codeforces.com/contest/804/problem/D [题目大意] 给你一个森林,每次询问给出u,v, 从u所在连通块中随机选出一个点与v所在连通块中随 ...

  6. Eclipse 4.5插件安装以及其他设置

    eclipse安装Veloeclipse.ui_2.0.8 在help->   install new software ->workwith中输入The Eclipse Project ...

  7. UDP和TCP的区别和联系

    UDP特点 将数据源和目的封装在数据包中,不需要简历连接 每个数据报的大小在限制在64K内 因无连接,是不可靠协议 不需要建立连接,速度快 TCP 建立连接.形成传输数据通道. 在连接中进行大量数据量 ...

  8. (转载)JavaScript中匿名函数,函数直接量和闭包

    首先,我们先看看下面几种写法:1.function f(x){return x*x;};f(x);2.(function(x){return x*x;})(x);3.(function(x){retu ...

  9. mac -- 安装OpenCV

    brew install opencv #这个装的是3.4 brew unlink opencv # 取消关联 brew install opencv@2  # 安装2.X的版本

  10. Flask参数解析、请求钩子

    转载请注明出处 https://www.cnblogs.com/chenxianpao/p/9949279.html  参数解析 Flask的参数解析主要用Request完成(from flask i ...