26

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

应用程序.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>
4

6 回答 6

71

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

  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，则可以使用Custom Decorator。查看此 SO 答案以获取更多信息。

3）在所有页面中禁用它

如果您想禁用滑动以查看应用程序中的任何位置，最简单的方法是使用swipeEnabledinput 属性（Ionic docs）：

<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>
于 2016-07-29T08:58:49.263 回答
3

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

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

来源

于 2016-07-29T08:19:09.670 回答
3

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

在您的 homepage.ts 中，

  constructor(private menu: MenuController) { }

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

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

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

于 2018-07-11T10:07:57.783 回答
2

最好的和简单的

在app.component.ts file

改变

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

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

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

于 2017-08-24T17:46:38.913 回答
1

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

于 2017-10-02T09:51:23.970 回答
1

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

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

它对我很有用。

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

于 2017-11-17T21:45:51.833 回答