【ionic4】侧边栏ion-menu中的时间和方法

• 如何建立侧边栏？

  1、建立项目的时候，直接建立有侧边栏的项目

  ionic start demo sidemenu
  

  ps：

  blank:一个空白的启动项目
  sidemenu：一个带有侧面菜单的起始项目，在内容区域中有导航
  tabs：具有简单选项卡界面的启动项目
  

  2、自己加右侧侧边栏
  1）首先打开：app.component.html（出现如下的代码）
  2）将下面的代码放入上图中（加入新的侧边栏）

  	<ion-menu side="end" type="push" menuId="end">
        <ion-header>
          <ion-toolbar color="danger">
            <ion-title>右侧</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
  

• 如何给侧边栏加按钮？

  根据上面的步骤实现增添右侧菜单栏，找到home->home.page.html

  <ion-buttons slot="end">  
       <ion-menu-button menu="end">  </ion-menu-button>
     </ion-buttons>
  

• 如何利用按钮控制侧边栏？
  (利用js控制侧边栏）
  1、给ion-menu定义menuId属性
  
  2、控制菜单的页面找那个引入下面代码

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

  3、初始化构造函数

  constructor(private menu: MenuController ) { }
  

  4、对应方法中通过js控制侧边栏

  openSlideMenu() {
      this.menu.open('end');
    }
  

结果展示：

标签：ion,ionic4,menu,项目,侧边,Item,Menu,右侧
来源： https://blog.csdn.net/LYN_xj94512/article/details/89645857