禁用滑动查看sidemenu ionic 2

Question

我正在使用侧边菜单 ionic 2。当我从左到右滑动此页面时，侧边菜单滑出我需要禁用特定页面中的侧边菜单滑动。

app.html

    <ion-menu [content]="content">
     <ion-content>
      <ion-list>
       <button ion-item *ngFor="let p of pages" menuClose (click)="openPage(p)" >
        <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
     </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

page.html 我在这个页面中禁用了滑动菜单，只有当我滑动时才禁用

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/portrait/portrait.html'
})
export class Portrait {
}

page.html

<ion-navbar persianred *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Portrait
  </ion-title>
</ion-navbar>

Answer 1

有几种方法可以做到这一点，具体取决于您要禁用菜单的位置：

1. 只在一页上禁用它
2. 在某些页面上禁用它（无需一遍又一遍地重复相同的代码）
3. 在所有页面中禁用它

---

1) 只在一页上禁用它

如果您想禁用滑动查看一页，最简单的方法是注入MenuController 实例并使用swipeEnable(shouldEnable, menuId) 方法（Ionic docs）。

import { NavController, MenuController } from 'ionic-angular/index';
import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  constructor(private menu: MenuController, ...) { }

  ionViewDidEnter() {
    this.menu.swipeEnable(false);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(false, 'menu1');
  }

  ionViewWillLeave() {
    // Don't forget to return the swipe to normal, otherwise 
    // the rest of the pages won't be able to swipe to open menu
    this.menu.swipeEnable(true);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(true, 'menu1');
   }

}

请注意两点：

1) 如果您使用 id，那么您需要将 id 添加到您的菜单中：

<ion-menu [content]="content" side="left" id="menu1">

2) 您需要已加载视图才能禁用菜单，因此一种方法是使用ionViewDidEnter 事件。

---

2) 在某些页面上禁用它

如果您想禁用某些页面（如登录/注册页面）上的侧边菜单，但又不想在每个页面上注入 MenuController 然后处理 ionViewDidEnter/ionViewWillLeave ，您可以使用自定义装饰器。请查看 this SO answer 了解更多信息。

---

3) 在所有页面中禁用它

如果您想禁用滑动以查看应用中的任何位置，最简单的方法是使用 swipeEnabled 输入属性 (Ionic docs)：

<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>

Answer 2

您可以使用MenuController 的enable 方法来启用/禁用特定页面的菜单。

打开页面时使用菜单 ID 调用 enable，离开页面时调用 disable。如果您的应用中只有一个菜单实例，则可以省略菜单 ID。

Source

Answer 3

简单最好的答案在这里...

在你的 homepage.ts 中，

  constructor(private menu: MenuController) { }

  ionViewDidEnter(){
    this.menu.swipeEnable(true);
  }

  ionViewWillLeave(){
    this.menu.swipeEnable(false);
  }

这将禁用除主页之外的所有其他页面的滑动。

Answer 4

最好的和简单的

在app.component.ts file

改变

<ion-menu [content]="content">

致<ion-menu [content]="content" hidden>

就是这样， 它会隐藏侧边菜单

Answer 5

在我的情况下，有效的是将[swipeEnabled]="false" 添加到 ion-menu。 这样我只能在单击菜单图标时显示侧面菜单。 这是基于 Ionic 2 文档：Menu。

Answer 6

基于“swipeEnabled”选项，我所做的是使用布尔变量设置条件。

<ion-menu [content]="content" [swipeEnabled]="(userLogged) ? true : false">

它对我很有用。

只是一个建议：也许有人会注意到，如果变量不是全局变量，即使在跳转到另一个页面后，应用程序也不会滑动。但是，除了将变量设置为全局将解析之外，在用户关闭并重新打开应用程序后，滑动将正常工作。