公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅。 
这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步:

  1. 在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:
  1. <ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
  2. //tabs
  3. </ion-tabs>

2.添加angularjs的指令,源码如下:

//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])

  1. app.directive('hideTabs', function($rootScope) {
  2. return {
  3. restrict: 'A',
  4. link: function(scope, element, attributes) {
  5. scope.$on('$ionicView.beforeEnter', function() {
  6. scope.$watch(attributes.hideTabs, function(value){
  7. $rootScope.hideTabs = 'tabs-item-hide';
  8. });
  9. });
  10. scope.$on('$ionicView.beforeLeave', function() {
  11. scope.$watch(attributes.hideTabs, function(value){
  12. $rootScope.hideTabs = 'tabs-item-hide';
  13. });
  14. scope.$watch('$destroy',function(){
  15. $rootScope.hideTabs = false;
  16. })
  17. });
  18. }
  19. };
  20. });

3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下:

  1. //这是官网模板中的文件
  2. <ion-view hide-tabs="true" view-title="{{chat.name}}">
  3. <ion-content class="padding">
  4. <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
  5. <p>
  6. {{chat.lastText}}
  7. </p>
  8. </ion-content>
  9. </ion-view>


ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)的更多相关文章

  1. ionic 进入二级目录以后隐藏底部导航栏(tabs)

    1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...

  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. Arduino 串口篇 Arduino发送十六进制 send HEX via serial port RS232-to-USB to PC

    发送十六进制比较直观,可以在上位机中直接获取十六进制的数据,然后在在上位机上将十六进制HEX转换成BIN(二进制)或者DEC(十进制)就十分简单有效了. 下面是在Arduino上怎么演示直接发送16进 ...

  2. [学习笔记] TensorFlow 入门之基本使用

    整体介绍 使用 TensorFlow, 你必须明白 TensorFlow: 使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使 ...

  3. hdu1205(类似 分布垃圾数列)

    Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...

  4. POJ 1013 小水题 暴力模拟

    Counterfeit Dollar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 35774   Accepted: 11 ...

  5. 通过VNC Viewer使用VMware虚拟机的远程桌面连接

    本文转自:http://www.14blog.com/archives/185 要在VMware虚拟机中使用远程桌面连接?方法有两个:一种是在虚拟机中做“端口映射”,当然,这个稍显复杂(虚拟机端口映射 ...

  6. CAS-ticket not recognized

    描述:项目用单点登陆后,在页面中刷新时报错,错误信息如下: Servlet.service() for servlet default threw exception: org.jasig.cas.c ...

  7. Java Tips and Best practices to avoid NullPointerException

    A NullPointerException in Java application is best way to solve it and that is also key to write rob ...

  8. MySQL 笔记 —— 日期和时间函数

    [TOC] 获取当前日期的函数和获取当前时间的函数 CURDATE()和CURRENT_DATE()函数获取当前日期:CURTIME()和CURRENT_TIME()函数获取当前时间. mysql&g ...

  9. .NET基础——数组

    这一篇,我们来看C#中的数组. 1. 数组的概念 数组:存储相同类型多个数据元素的容器 数组的声明和初始化: 在创建数组的时候,必须指定数组的长度 ]; ,, }; ] { , , };//数组元素的 ...

  10. Transform.TransformDirection 变换方向

    官方描述: JavaScript ⇒ TransformDirection(direction: Vector3): Vector3; C# ⇒ Vector3 TransformDirection( ...