禁用滑动以查看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我去禁用了这个页面的swipemenu，只在我滑动时禁用

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

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

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

Source

Answer 2

根据您要禁用菜单的位置，有多种方法可以做到这一点：

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

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) 在某些页面上禁用它

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

3) 在所有页面中禁用它

如果您想禁用滑动查看应用程序中的所有位置，最简单的方法是使用 swipeEnabled 输入属性（Ionic docs):

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

Answer 3

最好最简单

在app.component.ts file

改变

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

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

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

Answer 4

在我的例子中，有效的方法是将 [swipeEnabled]="false" 添加到 ion-menu。这样我只能在单击菜单图标时显示侧边菜单。这基于 Ionic 2 文档：Menu.

Answer 5

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

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

对我来说效果很好。

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

Answer 6

这里是简单的最佳答案...

在你的homepage.ts,

  constructor(private menu: MenuController) { }

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

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

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

禁用滑动以查看sidemenu ionic 2

Disable swipe to view sidemenu ionic 2

typescript

ionic-framework

ionic2

ionic3

angular

1) 仅在一页上禁用它

2) 在某些页面上禁用它

3) 在所有页面中禁用它