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

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

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

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

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

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

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

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

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

<ion-menu [content]="content">
  <ion-content>
    <!-- div header :里面是我编写的一个菜单页面的头部，一般情况下可以省掉 -->
    <div class="menu-header">
      <!-- onerror: 事件会在文档或图像加载过程中发生错误时被触发。 -->
      <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：是主要的菜单部分，这部分是菜单重点 -->
    <div class="menu-list">
      <!-- no-lines：取消list的默认线条 -->
      <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： 是这个菜单页面的底部也可以省略 -->
  <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文件里对菜单做一些数据的初始化

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 <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:'听歌识别',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;
    }

下面是我的完成界面。

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

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

猜你喜欢