下面是最近整理的一篇ionic3左側(cè)菜單欄的文章。

1，新建一個(gè)空白項(xiàng)目 ionic start  myApp blank

2, 要在模板中添加一個(gè)切換菜單，所以在模板中添加一個(gè)指令按鈕menuToggle（我這里的按鈕在HomePage導(dǎo)航欄上，這里HomePage也是項(xiàng)目項(xiàng)目初始化加載的初始頁(yè)面（根頁(yè)面））

 <button ion-button menuToggle icon-only>
      <ion-icon name='ios-menu-outline'></ion-icon>
    </button>

注意：如果MenuToggle按鈕添加到導(dǎo)航欄頁(yè)面，當(dāng)它所在頁(yè)面目前還是根頁(yè)面的按鈕才會(huì)出現(xiàn)或者頁(yè)面是應(yīng)用程序中加載的初始頁(yè)面，或者是使用NavController上的setRoot方法設(shè)置為根頁(yè)面的頁(yè)面。

    （1）菜單組件是從當(dāng)前視圖的側(cè)面滑入的導(dǎo)航抽屜。默認(rèn)情況下，它從左側(cè)滑入。

     （2）這里用[content]="content" 一個(gè)局部變量，將menu 添加到<ion-nav>上。

<ion-menu [content]="content">
  <ion-content>
    <!-- div header :里面是我編寫的一個(gè)菜單頁(yè)面的頭部，一般情況下可以省掉 -->
    <div class="menu-header">
      <!-- onerror: 事件會(huì)在文檔或圖像加載過程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)。 -->
      <div class="user-avatar ">
        <img [src]="chosenPicture || placeholder" onerror="this.src='assets/imgs/musicList1.jpg'" />
      </div>
      <div menuClose *ngFor="let p of butPages;let i=index">
        <div class="myname" (click)="openPage(p)" *ngIf="i==0">我-丹</div>
        <div class="grade" (click)="openPage(p)" *ngIf="i==1">lv.4</div>
        <div class="grade1" (click)="openPage(p)" *ngIf="i==2">
          簽到 >
        </div>
      </div>
    </div>
<!-- div menuList：是主要的菜單部分，這部分是菜單重點(diǎn) -->
    <div class="menu-list">
      <!-- no-lines：取消list的默認(rèn)線條 -->
      <ion-list no-lines>
        <button menuClose="left" ion-item *ngFor="let p of pages;let i=index" (click)="openPage(p)">
          <ion-icon name="{{p.icon}}" item-left class="iconColor"></ion-icon>
          {{p.title}}
        </button>
      </ion-list>
    </div>
  </ion-content>
  <!--footer： 是這個(gè)菜單頁(yè)面的底部也可以省略 -->
  <ion-footer>
      <div class="menu-footer">
          <ion-grid>
            <ion-row >
              <ion-col col-4 *ngFor="let f of footerBtn">
               <button ion-button clear >
                  <ion-icon name="{{f.icon}}" item-left class="iconColor" ></ion-icon> 
                  {{f.title}}
               </button>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
  </ion-footer>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

3.ts文件里對(duì)菜單做一些數(shù)據(jù)的初始化

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, NavController, NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { PageOnePage } from '../pages/page-one/page-one';
import { PageTwoPage } from '../pages/page-two/page-two';
import { PageThreePage } from '../pages/page-three/page-three';
import { MyInfoPage } from '../pages/my-info/my-info';
import { MyGradePage } from '../pages/my-grade/my-grade';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  footerBtn;
  // 父組件中使用@ViewChild拿到子組件的變量和方法（父組件可調(diào)用子組件的方法和變量）
  // 這里引入的是app.html <ion-nav>
  @ViewChild(Nav) nav: Nav;
  rootPage=HomePage;
  placeholder = 'assets/imgs/header-logo.jpg';
  chosenPicture: any;
  butPages;
  pages;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });
    this.initPages();
    this.initButPages();
    this.initfooter();

  }

  initPages(){
    this.pages=[
      {title:'我的消息',component: PageOnePage,icon:'ios-mail-outline'},
      {title:'我的好友',component: PageThreePage,icon:'ios-contact-outline'},
      {title:'附近的人',component: PageThreePage,icon:'ios-pin-outline'},
      {title:'商城',component: PageThreePage,icon:'ios-cart-outline'},
      {title:'聽歌識(shí)別',component: PageThreePage,icon:'ios-mic-outline'},
      {title:'定時(shí)停止播放',component: PageThreePage,icon:'ios-clock-outline'},
      {title:'掃一掃',component: PageThreePage,icon:'ios-qr-scanner-outline'},
      {title:'音樂鬧鐘',component: PageThreePage,icon:'ios-alarm-outline'},
      {title:'駕駛模式',component: PageThreePage,icon:'ios-car-outline'},
      {title:'個(gè)性換膚',component: PageThreePage,icon:'ios-shirt-outline'},
      {title:'音樂云盤',component: PageThreePage,icon:'ios-cloudy-outline'}
    ]
  }

  initButPages(){
    this.butPages=[
      {title:'my info',component: MyInfoPage},
      {title:'my grade',component: MyGradePage},
      {title:'my grade',component: MyGradePage}
    ]
  }
  openPage(page) {
    this.nav.push(page.component);
  }
  initfooter(){
    this.footerBtn=[
      {title:'夜間',icon:'ios-moon-outline'},
      {title:'設(shè)置',icon:'ios-settings-outline'},
      {title:'退出',icon:'ios-power-outline'},
    ]
  }
}

    .menu-header{
        background-image: url(../assets/imgs/musicList2.jpg);
        height:28%;
    }
    .user-avatar {
        padding-top:11%;
        padding-left:6%;
      }
    .user-avatar img{
          width: 27%;
          height: 26%;
          border-radius:50%;
      }
    .myname{
          padding-left: 6%;
          font-family: KaiTi;
          color:white;
          font-size: 1.2em;
          display: block;
          float: left;
          margin-right: 4%;
          padding-top:6px;
      }
    .grade{
          height: 16px;
          width: 30px;
          border: white 1px solid;
          font-family: KaiTi;
          font-size: 0.8em;
          text-align: center;
          color: white;
          border-radius:8px;
          display: block;
          margin-top:9px;
          float: left;
      }
      .grade1{
        height: 22px;
        width: 60px;
        border: white 1px solid;
        font-family: KaiTi;
        font-size: 0.8em;
        color: white;
        border-radius: 8px;
        display: block;
        float: right;
        margin-right:5%;
        margin-top:5px;
        text-align: center;
        line-height: 22px;
    }
    .menu-list{
        padding-top:3%;
        height: 64%;
    }
    .menu-footer button{
        color: black;
    }
    .iconColor{
        color: gray;
    }

下面是我的完成界面。

如果有什么不足請(qǐng)多多指教