zoukankan      html  css  js  c++  java
  • ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)

    公司开始使用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=" 64px; height: 64px">
    5. <p>
    6. {{chat.lastText}}
    7. </p>
    8. </ion-content>
    9. </ion-view>






  • 相关阅读:
    Linux学习笔记(20)linux exec
    【最佳实践】filezilla软件用bat自动化ftp传输文件
    Windows定时任务定时执行bat文件标准输出默认位置
    安装mysql odbc5.3.13
    如何查看windows server是否有web发布?
    C#串口通讯
    asp.net中通过post的方式导出文件操作。
    C#USB口通讯
    jquery UI的Widet
    asp.net中的常规认证方式枚举(涵盖mvc)(一)
  • 原文地址:https://www.cnblogs.com/joelan/p/5532341.html
Copyright © 2011-2022 走看看