Ionic侧菜单隐藏了我的所有主要内容

Ionic-side-menu hides all of my main content

本文关键字：所有主 我的 菜单 隐藏 Ionic      更新时间：2023-09-26

我正试图在我的应用程序上实现一个侧栏，这样我就可以在其中存储与菜单相关的选项，但我的问题是，每当我集成离子侧栏菜单时，它总是隐藏我的主要内容。

例如，每当我不在代码中添加边栏指令时，一切都会正常工作，即使我使用的是ionic头栏指令。但每当我把标题栏放在侧菜单中时，它之外的一切都会消失。这就好像侧菜单推送或重叠了所有其他现有内容，除非我将其从DOM中删除。

请参阅下面的屏幕截图。我应该看到侧菜单右侧的内容：

谢谢！

http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0

<html ng-app="ionicApp">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title>Ionic Template</title>
      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
      <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
      <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
      <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
   </head>
   <body ng-controller="MyCtrl">
      <ion-side-menus enable-menu-with-back-views="false">
         <ion-side-menu-content>
            <ion-nav-bar class="bar-stable">
               <ion-nav-back-button>
               </ion-nav-back-button>
               <ion-nav-buttons side="left">
                  <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                  </button>
               </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
         </ion-side-menu-content>
         <ion-side-menu side="left">
            <ion-header-bar class="bar-stable">
               <h1 class="title">Left</h1>
            </ion-header-bar>
            <ion-content>
               <ion-list>
                  <ion-item menu-close ng-click="login()">
                     Login
                  </ion-item>
                  <ion-item menu-close href="#/app/search">
                     Search
                  </ion-item>
                  <ion-item menu-close href="#/app/browse">
                     Browse
                  </ion-item>
                  <ion-item menu-close href="#/app/playlists">
                     Playlists
                  </ion-item>
               </ion-list>
            </ion-content>
         </ion-side-menu>
      </ion-side-menus>
      <ion-content>
         <ion-slide-box on-slide-changed="slideHasChanged($index)">
            <ion-slide>
               <div class="box blue">
                  <h1>BLUE</h1>
               </div>
            </ion-slide>
            <ion-slide>
               <div class="box yellow">
                  <h1>YELLOW</h1>
               </div>
            </ion-slide>
            <ion-slide>
               <div class="box pink">
                  <h1>PINK</h1>
               </div>
            </ion-slide>
         </ion-slide-box>
      </ion-content>
   </body>
</html>

您必须在离子内容容器中添加幻灯片框&将"has-header"类添加到其中，这样它就可以将ion-nav标头考虑在内。也就是说，这里是解决方案：

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Template</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
        <ion-content class="has-header">
            <ion-slide-box on-slide-changed="slideHasChanged($index)">
                <ion-slide>
                    <div class="box blue">
                        <h1>BLUE</h1>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box yellow">
                        <h1>YELLOW</h1>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box pink">
                        <h1>PINK</h1>
                    </div>
                </ion-slide>
            </ion-slide-box>
        </ion-content>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item menu-close href="#/app/search">
                    Search
                </ion-item>
                <ion-item menu-close href="#/app/browse">
                    Browse
                </ion-item>
                <ion-item menu-close href="#/app/playlists">
                    Playlists
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

<script>
    angular.module('ionicApp', ['ionic', 'ngMaterial'])
            .controller('MyCtrl', function ($scope) {
            });
</script>
</body>
</html>
相关文章：