使用下拉菜单转换 Ionic 侧边菜单答案

【问题标题】：Convert Ionic sidemenu with dropdown menu使用下拉菜单转换 Ionic 侧边菜单
【发布时间】：2018-08-06 01:33:41
【问题描述】：

我正在从事 ionic 项目，我正在尝试将侧边菜单转换为下拉菜单。

我使用ionic start appname sidemenu 命令创建了 ionic 应用程序。

目前，默认行为是当我点击汉堡链接打开菜单时，菜单会从左向右滑动。

但我想要类似的东西

this one

我该怎么做？

【问题讨论】：

标签： javascript angular ionic-framework

【解决方案1】：

假设您使用的是ionic 3+，那么您可以使用PopoverController

所以现在你会有

<button ion-button icon-only (click)="presentPopover($event)">
  <ion-icon name="menu"></ion-icon>
</button>

然后是您要呈现的主页

import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present({
      ev: myEvent
    });
  }
}

那么你的菜单就是

@Component({
  template: `
    <ion-list>
      <ion-list-header>Ionic</ion-list-header>
      <button ion-item (click)="close()">Home</button>
      <button ion-item (click)="close()">Services</button>
      <button ion-item (click)="close()">Contact</button>
    </ion-list>
  `
})
class PopoverPage {
  constructor(public viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }
}

【讨论】：

感谢您的回复。但是如何禁用默认的左侧滑动菜单？当我点击汉堡图标时，它会显示默认菜单和弹出框。