离子2菜单转换

我遵循离子2的菜单文档，我想显示这样的菜单：

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

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

菜单显示在内容页面上方，button消失！ 这里是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> -element：

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

文档说：
'材质devise和Windows模式的默认types是overlay ，而reveal是iOS模式的默认types。

您显示的所需结果以iOS模式显示。 你得到的结果是在材料devise模式。