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文件中! 

  • 相关阅读:
    混合开发的坑(3) ---关于es6
    混合开发的坑(2) ---pdf展示
    混合开发的坑(1) ---ajax请求
    vue.js
    vue中 import引入组件
    vue中 静态文件引用注意事项
    Oracle 数据库链接
    Oracle中的NVL,NVL2,NULLIF以及COALESCE函数使用
    Merge into 使用
    C# —— IList, ArrayList与List的区别详解
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6845275.html
Copyright © 2011-2022 走看看