Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

1、侧边栏 ion-menu 组件的基本使用

 

1、创建项目

 

ionic start myApp sidemenu

 

2、配置项目

 

属性	作用	可选值
side	配置侧边栏的位置	start end
menuId	侧边栏的唯一标识
type	配置侧边栏的弹出方式	overlay, reveal, push
swipe-gesture	滑动弹出侧边栏	true false

 

 

<ion-menu side="start" menuId="first"> <ion-header>
<ion-toolbar color="primary"> <ion-title>Start Menu</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item> </ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item> </ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

 

---

 

 

<ion-app>


  <ion-menu side="start" menuId="first" type="overlay">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>

        <ion-menu-toggle>

          <ion-item>Menu Item1111</ion-item>

        </ion-menu-toggle>

        <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>


  <ion-menu side="end" menuId="end1" type="push">
    <ion-header>
      <ion-toolbar color="success">
        <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>

  <ion-router-outlet main></ion-router-outlet>

</ion-app>

---

 

 

2、侧边栏 ion-menu 中的事件和方法

 

Ionic4.x 中允许我们用 js 控制侧边栏，具体步骤如下。

 

1、给 ion-menu 定义 menuId 属性

 

 <ion-menu side="start" menuId="first"> </ion-menu>

 

2、控制菜单的页面中引入下面代码:

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

3、初始化构造函数

constructor(private menu: MenuController) { }

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

 

doOPenMenu() { this.menu.open('first');
}

 

---

3、底部 tabs 结合侧边栏 ion-menu

 

找到 app.component.html 在页面中加入下面代码

 

<ion-app>
<ion-menu swipe-gesture=true type="overlay" menuId="first" > <ion-header>
<ion-toolbar> <ion-title>菜单</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表 </ion-item></ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>