文档章节

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

小黑202
 小黑202
发布于 2016/04/11 14:54
字数 375
阅读 45
收藏 0

有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}">
//tabs
</ion-tabs>

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

//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .directive('hideTabs', function ($rootScope,$location) {
    return {
      restrict: 'AE',
      link: function (scope, element, attributes) {
        scope.$on('$ionicView.beforeEnter', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = value;
            if ($location.path() == '/main_tab/mian' || $location.path() == '/main_tab/mian') {
              //scope.$on('$ionicView.beforeLeave', function() {
              //  $rootScope.hideTabs = false;
              //});
            }
          })
        })
      }
    }
  })
//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>

4.

另外,如果要把效果搞得好看点,没有什么延迟现象,需要改动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文件中! 
 

© 著作权归作者所有

上一篇: 推送
下一篇: 资源库
小黑202
粉丝 7
博文 156
码字总数 41238
作品 0
西安
程序员
私信 提问
Ionic学习日记3:android底部导航栏

新建一个页面用于放置tabs 首先打开命令提示符进入到项目中,然后输入 这个将用于放置底部导航栏 修改tabs.html 我是删掉该文件中所有的内容,然后输入(因具体项目而定,可以不用和我一样效...

SWKende
2017/11/29
0
0
Ionic3项目实战

image 记录一些使用ionic3开发项目实战经验和功能解决方案。 原文链接 目录结构 Ionic应用是混合式开发的单页面应用,在开发之初要考虑到页面的切换和业务流程,以页面流定义项目层级关系会导...

bestvist
2017/11/02
0
0
RN项目中实现React-Navigation动态底部导航栏

需求 这是去年 App 项目提出的一个需求,因为我们做的这个 App 区分了很多渠道,同时登录用户也有很多状态,一些菜单需要动态的显示隐藏。项目是使用的 React-Native 框架,路由库选择官方推...

风霜秋月
06/11
0
0
Ionic系列——CodePen上的优秀Ionic_Demo

案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Men......

龙马行空
2015/10/08
31.2K
8
为什么中国很多app都不固定下面的tab(点到下一级页面就消失了)?

为什么中国很多app都不固定下面的tab(点到下一级页面就消失了)? make it simple2015-07-1176 阅读 NavigationiOS 本文来自 知乎的一个问题 照旧先说结论: 切换成本。 底部 Tab Bar 是否常...

make it simple
2015/07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分页查询

一、配置 /*** @author beth* @data 2019-10-14 20:01*/@Configurationpublic class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor(){ ......

一个yuanbeth
28分钟前
3
0
在LINQPad中使用Ignite.NET

LINQPad是进行.NET开发的一款优秀工具,非常有利于Ignite.NET API的快速入门。 入门 下载LINQPad:linqpad.net/Download.aspx,注意要选择64位操作系统的AnyCPU版本; 安装Ignite.NET的NuGet...

李玉珏
42分钟前
4
0
JS其他类型值转化为Boolean类型规则

本文转载于:专业的前端网站➤JS其他类型值转化为Boolean类型规则 由于最近在笔试的时候,发现好多关于其他类型转化为Boolean类型的题目,因此总结一下! 一、String类型转化为Boolean 1.转化...

前端老手
53分钟前
6
0
EurekaClient自动装配及启动流程解析

在上篇文章中,我们简单介绍了EurekaServer自动装配及启动流程解析,本篇文章则继续研究EurekaClient的相关代码 老规矩,先看spring.factories文件,其中引入了一个配置类EurekaDiscoveryClie...

Java学习录
59分钟前
10
0
析构函数是否必须为虚函数?为何?

p517 在C++中,基类指针可以指向一个派生类的对象。如果基类的析构函数不是虚函数,当需要delete这个指向派生类的基类指针时,就只会调用基类的析构函数,而派生类的析构函数无法被调用。容易...

天王盖地虎626
59分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部