Ionic3 iOS端移除侧边菜单打开时的汉堡菜单切换按钮方法

这个问题我之前帮好几个开发者处理过，Ionic 3针对iOS平台的侧边菜单做了默认适配——打开菜单时会保留顶部的汉堡切换按钮，而安卓端则会自动隐藏，刚好和你遇到的情况一致。下面给你几个靠谱的解决方法，按简单程度排序：

方法一：全局CSS隐藏（最快捷） #

直接在项目的src/app/app.scss文件中添加以下样式，利用Ionic给iOS平台元素自动加上的platform-ios类，精准隐藏汉堡按钮：

// 隐藏iOS平台下的侧边菜单切换按钮
.platform-ios .button-menutoggle {
  display: none !important;
}

如果只希望在菜单打开时隐藏，关闭时恢复，可以结合菜单的状态类：

// 仅当侧边菜单打开时，隐藏iOS的汉堡按钮
.platform-ios .menu-open .button-menutoggle {
  display: none !important;
}

方法二：通过MenuController动态控制（更灵活） #

如果需要更精细的控制（比如某些页面保留按钮，某些页面隐藏），可以在app.component.ts中监听菜单的打开/关闭事件，针对iOS平台动态调整按钮显示状态：

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  constructor(public platform: Platform, public menuCtrl: MenuController) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 监听菜单打开事件，隐藏iOS汉堡按钮
      this.menuCtrl.open().subscribe(() => {
        if (this.platform.is('ios')) {
          const menuBtn = document.querySelector('.button-menutoggle');
          if (menuBtn) menuBtn.style.display = 'none';
        }
      });

      // 监听菜单关闭事件，恢复按钮显示（可选）
      this.menuCtrl.close().subscribe(() => {
        if (this.platform.is('ios')) {
          const menuBtn = document.querySelector('.button-menutoggle');
          if (menuBtn) menuBtn.style.display = 'block';
        }
      });
    });
  }
}

方法三：页面级自定义导航栏按钮 #

如果你的自定义关闭按钮是在页面的导航栏中，也可以直接在页面的ion-navbar中替换默认的菜单按钮，同时隐藏原生按钮：

<ion-header>
  <ion-navbar>
    <!-- 自定义关闭按钮 -->
    <button ion-button icon-only (click)="menuCtrl.close()" *ngIf="menuCtrl.isOpen()">
      <ion-icon name="close"></ion-icon>
    </button>
    <!-- 仅非iOS平台显示默认汉堡按钮 -->
    <button ion-button menuToggle *ngIf="!menuCtrl.isOpen() && !platform.is('ios')">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>页面标题</ion-title>
  </ion-navbar>
</ion-header>

记得在页面的ts文件中注入依赖：

import { MenuController, Platform } from 'ionic-angular';

constructor(public menuCtrl: MenuController, public platform: Platform) {}

补充说明 #

Ionic 3的这种平台差异是为了贴合iOS和安卓的原生交互习惯：iOS原生应用中侧边菜单打开时通常保留切换按钮，而安卓则会替换为关闭按钮。如果你想统一两端的行为，上面的方法都能帮你实现。

内容的提问来源于stack exchange，提问作者U rock