ionic4学习笔记17-基础学习创建一个带侧边栏的项目

谁借莪１个温暖的怀抱￠ 2023-02-25 10:05 25阅读 0赞

1、创建一个带侧边栏的项目

ionic start myApp sidemenu

2、创建成功后，在app.component.html页面查看相应代码

<ion-menu menuId="first" side="start" type="overlay">
         <ion-header>
           <ion-toolbar color="success">
             <ion-title>用户信息</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content>
              <ion-list>
    
                <ion-menu-toggle>
                  <ion-item [routerDirection]="'root'"  [routerLink]="['/news']">
                    <ion-label>我的新闻</ion-label>
                  </ion-item>
                </ion-menu-toggle>
    
              <ion-menu-toggle>
                <ion-item [routerLink]="['/product']">
                  <ion-label>我的商品</ion-label>
                </ion-item>
    
              </ion-menu-toggle>
              </ion-list>
         </ion-content>
       </ion-menu>
       
      <ion-router-outlet main></ion-router-outlet>

3、进入菜单栏页面的按钮代码

<ion-buttons slot="start">
    	 
          <ion-menu-button menu="first"></ion-menu-button>
        </ion-buttons>

4、使用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');
    }