ionic3学习笔记(五)-sidemenu的实现

下面是最近整理的一篇ionic3左侧菜单栏的文章。

1，新建一个空白项目 ionic start  myApp blank

2, 要在模板中添加一个切换菜单，所以在模板中添加一个指令按钮menuToggle（我这里的按钮在HomePage导航栏上，这里HomePage也是项目项目初始化加载的初始页面（根页面））

注意：如果MenuToggle按钮添加到导航栏页面，当它所在页面目前还是根页面的按钮才会出现或者页面是应用程序中加载的初始页面，或者是使用NavController上的setRoot方法设置为根页面的页面。

3，创建菜单页面（这里我是在app.html）

    （1）菜单组件是从当前视图的侧面滑入的导航抽屉。默认情况下，它从左侧滑入。

     （2）这里用[content]="content" 一个局部变量，将menu 添加到上。

  
    
    

      
      

        
      
      

        
我-丹
        
lv.4
        

          签到 >
        
      
    

    

      
      
        
          
          {{p.title}}
        
      
    
  
  
  
  
      

          
            
              
               
                   
                  {{f.title}}
               
              
            
          
        
  

3.ts文件里对菜单做一些数据的初始化

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拿到子组件的变量和方法（父组件可调用子组件的方法和变量）
  // 这里引入的是app.html 
  @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:'听歌识别',component: PageThreePage,icon:'ios-mic-outline'},
      {title:'定时停止播放',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:'个性换肤',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:'设置',icon:'ios-settings-outline'},
      {title:'退出',icon:'ios-power-outline'},
    ]
  }
}

4，到这里已经差不多完成了，下面是一些css样式设计

    .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;
    }

下面是我的完成界面。

如果有什么不足请多多指教