【问题标题】:Ionic hide nav-bar not the buttons离子隐藏导航栏而不是按钮
【发布时间】:2016-08-28 13:29:24
【问题描述】:

我正在尝试找到一种可能的方法来隐藏离子 ion-nav-bar 而不隐藏 ion-nav-bar按钮。
我试过了

hide-nav-bar="true"

但它也隐藏了按钮。我已经搜索并推荐了this,但没有解决我的问题。
问候。

【问题讨论】:

    标签: javascript jquery html css ionic-framework


    【解决方案1】:

    你只需要指定想要隐藏栏的状态,并修改一些样式

    JS:

    $rootScope.$on('$stateChangeStart', function(ev, toState, toParams, fromState, fromParams){
    
        var states = ['tabs.about', 'tabs.contact'];
    
        if(states.indexOf(toState.name) > -1) {
          $rootScope.hideBar=true;
        } else {
          $rootScope.hideBar=false;
        }
    });
    

    HTML:

    <ion-nav-bar class="bar-positive" ng-class="{ 'make-border-trasparent': hideBar }">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    

    请看一下这个例子(我将栏隐藏在tabs.abouttabs.contact 状态)

    Codepen

    【讨论】:

    • 谢谢,但我之前已经尝试过,但它仍然不适合我。这是否仅适用于选项卡,因为我正在使用 sidemenu 应用程序。还有一件事我不想让导航栏完全只是想使用本机侧边菜单功能。
    • 我在 sidemenu 应用程序中构建了相同的示例,显然它运行良好:codepen.io/anon/pen/JXwGWJ
    • 我正在尝试。你能检查一下这张图片吗,我们可以通过侧边菜单按钮获得这种类型的视图dropbox.com/s/27cpnhmgk39403n/…
    • 我了解您的需求。隐藏所有导航栏、添加按钮以及手动触发菜单的打开可能会更容易。使用 $ionicSideMenuDelegate 服务,您可以控制菜单的多个方面(打开:$ionicSideMenuDelegate.toggleLeft();
    • @Atula 显示此示例(关于与会者内容):codepen.io/anon/pen/JXwGWJ
    猜你喜欢
    • 2012-04-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-01
    • 1970-01-01
    • 2012-07-03
    相关资源
    最近更新 更多