ionic 进入二级目录以后隐藏底部导航栏(tabs)
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)的更多相关文章
- ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)
公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...
- UIScrollView滚动时隐藏底部导航栏问题
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滚动"); int currentPostio ...
- ionic2 跳转子页面隐藏底部导航栏
第一种方法: 在tab里面添加一个属性[tabsHideOnSubPages]='true' <ion-tab [root]="tab1Root" [tabsHideOnSu ...
- Android应用-底部导航栏的使用
目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...
- vue实现动态显示与隐藏底部导航的方法分析
本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显 ...
- ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
- 二、Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...
- Android学习笔记- Fragment实例 底部导航栏的实现
1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...
- Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏
在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示: 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...
随机推荐
- scrapy抓取拉勾网职位信息(三)——爬虫rules内容编写
在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...
- CNN-感受野
CNN中感受野的计算:http://blog.csdn.net/kuaitoukid/article/details/46829355(好像有错误)http://blog.csdn.net/green ...
- 手机发送验证码—.net代码
注册过程中,短信发送验证码流程如下: (1).用户提交手机号码,申请湖区验证码 (2).网站按照预制规则生成验证码 (3).网站将用户手机号码和验证码发送到短信平台 (4).将制定内容发送到制定手机号 ...
- 【HDU 5730】Shell Necklace
http://acm.hdu.edu.cn/showproblem.php?pid=5730 分治FFT模板. DP:\(f(i)=\sum\limits_{j=0}^{i-1}f(j)\times ...
- [BZOJ3622]已经没有什么好害怕的了(容斥DP)
给定两个数组a[n]与b[n](数全不相等),两两配对,求“a比b大”的数对比“b比a大”的数对个数多k的配对方案数. 据说做了这题就没什么题好害怕的了,但感觉实际上这是一个套路题,只是很难想到. 首 ...
- AGC 012 D - Colorful Balls
题面在这里! 为什么atcoder都是神仙题啊qwq 首先发现如果要让 x,y 互换位置的话,要么通过他们直接换 (也就是x和y满足两种操作之一),要么间接换,通过一些其他的元素形如 x可以和 a[1 ...
- [UOJ348]州区划分
设$f_i$表示选状态为$i$的点的答案,$s_i$表示状态为$i$的点权和,$不存在欧拉回路g_i=[i\,不存在欧拉回路]s_i$ 那么$f_i=\sum\limits_{j\subset i}\ ...
- 【线段树】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem J. Jedi Training
题意:给你一个序列,支持两种操作:单点修改:询问一个区间中所有相邻位置下标奇偶性均不同的子序列中,和最大的是多少. 线段树每个结点维护四个值: 以奇数下标开始到奇数下标结束的最大子序列和: 以偶数下标 ...
- python3-开发进阶-RESTful 软件架构风格
一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
- idea自动生成spring实体
创建Spring Boot项目 idea创建新项目 File->New->Project选择Spring Initializr默认使用官方的https://start.spring.io/ ...