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

  • 如何建立侧边栏?

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

    ionic start demo sidemenu
    

    ps:

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

    2、自己加右侧侧边栏
    1)首先打开:app.component.html(出现如下的代码)
    【ionic4】侧边栏ion-menu中的时间和方法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属性
    【ionic4】侧边栏ion-menu中的时间和方法
    2、控制菜单的页面找那个引入下面代码

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

    3、初始化构造函数

    constructor(private menu: MenuController ) { }
    

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

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

结果展示:
【ionic4】侧边栏ion-menu中的时间和方法

上一篇:【ionic4】解决页面刷新返回按钮消失的问题(ion-back-button)


下一篇:ASP.NET通过Global.asax和Timer定时器定时运行后台代码