滑动菜单推动页面,但不会越过页面

时间:2019-06-19 22:03:01

标签: ionic-framework

我不知道为什么我的侧边菜单将页面侧推而不翻页。

enter image description here

感谢您的帮助

menu.module.ts路由并显示aPage。菜单页面是页面的父页面,创建页面只是为了创建侧边菜单。

menu.html

<!-- Slide Menu -->
<ion-split-pane>
  <ion-menu contentId="content" slide="start">

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false">
            <ion-item>
              <ion-icon name="create" color="primary" slot="start"></ion-icon>
              <ion-label (click)="onLaunchModal()">
                Edit
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>

  </ion-menu>

  <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

menu.modules.ts

const routes: Routes = [
  {
    path: 'displayPage',
    component: InfoMenuPage,
    children: [
      {
        path: 'aPage',
        loadChildren: '../../pages/apage/apage.module#ApagePageModule'
      },
    ]
  },
  {
    path: '',
    redirectTo: 'displayPage/aPage',
    pathMatch: 'full'
  }
];

aPage.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>A Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

          Some Code

</ion-content>

1 个答案:

答案 0 :(得分:0)

您可以使用<ion-split-pane> <ion-menu contentId="content" slide="start" type="overlay"> ... ... </ion-menu> </ion-split-pane> 属性设置菜单叠加层:

示例:

{{1}}

这里是documentation