【ionic4】侧边栏ion-menu中的事件和方法

  • 如何建立侧边栏?

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

    ionic start demo sidemenu
    

    ps:

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

    2、自己加右侧侧边栏
    1)首先打开:app.component.html(出现如下的代码)
    【ionic4】侧边栏ion-menu中的事件和方法_第1张图片
    2)将下面的代码放入上图中(加入新的侧边栏)

    	
          
            
              右侧
            
          
          
            
              Menu Item
              Menu Item
              Menu Item
              Menu Item
              Menu Item
            
          
        
    
  • 如何给侧边栏加按钮?

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

      
           
       
    
  • 如何利用按钮控制侧边栏?
    (利用js控制侧边栏)
    1、给ion-menu定义menuId属性
    【ionic4】侧边栏ion-menu中的事件和方法_第2张图片
    2、控制菜单的页面找那个引入下面代码

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

    3、初始化构造函数

    constructor(private menu: MenuController ) { }
    

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

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

结果展示:
【ionic4】侧边栏ion-menu中的事件和方法_第3张图片

你可能感兴趣的:(ionic)