javascript - Ionic 2 菜单转换

Question

我遵循了 ionic 2 的菜单文档，我想这样显示菜单:

所以菜单显示在内容页面下方，菜单按钮仍然显示。

但是当我运行我的应用程序时，我得到了这个:

菜单显示在内容页面上方，按钮消失了! 这是 app.html 代码:

<ion-split-pane>
    <ion-menu side="left" id="loggedInMenu" [content]="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content>
            <ion-list>
                <button ion-item menuClose="loggedInMenu" *ngFor="let p of appPages" (click)="openPage(p)">
                    <ion-icon item-start [name]="p.icon" [color]="isActive(p)" ></ion-icon>
                    {{p.title}}
                </button>
            </ion-list>
        </ion-content>
    </ion-menu>
    <!-- main navigation -->
    <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>

</ion-split-pane>

app.componenent.ts :

import { Component, ViewChild } from '@angular/core';
import { Platform,MenuController, Nav, } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { MainPage } from '../pages/main/main';
import { MyDogsPage } from '../pages/my-dogs/my-dogs';
import { MyCoursesPage } from '../pages/my-courses/my-courses';
import { FriendsPage } from '../pages/friends/friends';
import { TrainersPage } from '../pages/trainers/trainers';
import { AuthenticationProvider } from '../providers/authentication/authentication'



export interface PageInterface {
  title: string;
  component: any;
  icon: string;
  index?: number;

}


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  appPages: PageInterface[] = [
    { title: 'Account', component: MainPage, index: 0, icon: 'finger-print' },
    { title: 'My Dogs',  component: MyDogsPage,index: 1, icon: 'paw' },
    { title: 'My Course', component: MyCoursesPage, index: 2, icon: 'book' },
    { title: 'Friends', component: FriendsPage, index: 3, icon: 'people' },
    { title: 'My Trainers', component: TrainersPage, index: 4, icon: 'man' },

  ];
  rootPage:any;
  currentTitle ='';
  activePage:any;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public userData: AuthenticationProvider, public menuctrl: MenuController) {
    this.rootPage=(localStorage.disableintro? LoginPage:HomePage)
    this.userData.hasLoggedIn().then((hasLoggedIn) => {
      this.enableMenu(hasLoggedIn === true);
    });
    this.enableMenu(false);

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  enableMenu(loggedIn: boolean) {
    this.menuctrl.enable(loggedIn, 'loggedInMenu');
  }


  openPage(page) {
    let params = {};
    console.log('dd');

    this.nav.setRoot(page.component, params).catch((err: any) => {
      console.log('rr');

        console.log(`Didn't set nav root: ${err}`);
    });

    this.activePage=page;
  }

  isActive(page: PageInterface) {
    let childNav = this.nav.getActiveChildNavs()[0];

    // Tabs are a special case because they have their own navigation
    if (childNav) {
      if (childNav.getSelected() ) {
        return 'primary';
      }
      return;
    }

    if (this.nav.getActive() && this.nav.getActive().name === page.title) {
      return 'primary';
    }
    return;
  }
}

请帮忙。

Answer 1

尝试添加 type='reveal给你的<ion-menu> -元素:

<ion-menu type='reveal' side="left" id="loggedInMenu" [content]="content">

docs说:
'Material Design 和 Windows 模式的默认类型都是 overlay , 和 reveal是 iOS 模式的默认类型。'

您要显示的结果以 iOS 模式显示。您得到的结果是在 Material Design 模式下。