侧边栏

侧边栏功能是手机端比较常用的，用户操作起来也十分地方便，本编博客看看ionic4如何实现侧边栏的功能

HTML代码

<ion-header>
  <ion-toolbar>
    <ion-title>test</ion-title>
  </ion-toolbar>
</ion-header>

<!-- 侧边栏 -->
<ion-menu side="start">
  <ion-header>
      <ion-toolbar color="green">
          <ion-title>章节</ion-title>
      </ion-toolbar>
  </ion-header>
  <ion-content>
    测试
    </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

<ion-content padding>
  <br>
  <ion-button (click)="openEnd()">开始作答1</ion-button>
  <br>
</ion-content>

ts代码

import { MenuController} from '@ionic/angular';

constructor(
        private menu: MenuController,
  ) { }

openEnd() {
  this.menu.open('start');
}

效果