博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ionic 进入二级目录以后隐藏底部导航栏(tabs)
阅读量:6853 次
发布时间:2019-06-26

本文共 1162 字,大约阅读时间需要 3 分钟。

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

//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”,源码如下:

//这是官网模板中的文件

{

{chat.lastText}}

现在体验下效果吧! 

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

转载于:https://www.cnblogs.com/crazycode2/p/6845275.html

你可能感兴趣的文章
Dapper,大规模分布式系统的跟踪系统
查看>>
Spring源码之XMLBeanFactory
查看>>
PopupWindow 点击外部区域无法关闭的问题
查看>>
jQuery 遍历
查看>>
开源的丰富的flutter Icons库
查看>>
内存管理Release和Retain实现原理
查看>>
(JVM 笔记)Java虚拟机:Java 内存管理
查看>>
一分钟读懂兼容报告——行业对标数据助你定位产品状况
查看>>
Axure RP 7.0从入门到精通 Web+APP产品经理原型设计 彩色pdf扫描版
查看>>
点击H5页面的时候出现阴影
查看>>
js实现一个按照权重抽奖函数
查看>>
Java程序员必会的13种热门技能
查看>>
HTTP请求详解
查看>>
企业分布式微服务云SpringCloud SpringBoot mybatis (六)分布式配置中心(Spring Cloud Config)...
查看>>
java B2B2C springmvc mybatis多租户电子商城系统-(四)断路器(Hystrix)
查看>>
Spring Boot2.0 整合 Kafka
查看>>
Jackson异常情况处理
查看>>
Windows Server 2008R2 ADRMS 群集部署SOP
查看>>
squid+iptables实现透明代理
查看>>
phpMyWind本地伪静态设置方法_已迁移
查看>>