zoukankan      html  css  js  c++  java
  • 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=" 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文件中! 

  • 相关阅读:
    基于WPF的UI自动化测试[1] 自动化测试工具
    PSR
    技术型人员如何晋升项目经理
    HyperV 组件架构(1)—总体架构
    从技术到管理:工作转型后角色定位
    Web性能优化方案
    一个项目经理的一些个人体会
    从技术人才到项目管理的跨越
    研发项目经理的管理
    从程序类转向销售类工作,该如何进行?
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6845275.html
Copyright © 2011-2022 走看看