禁用滑动以查看侧面菜单2 [英] Disable swipe to view sidemenu ionic 2

问题描述

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

I'm using a sidemenu ionic 2. when I swipe this page from left to right the side menu slides out i need to disable sidemenu swipe in particular page.

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，仅在我滑动时禁用

page.html I went to disable swipemenu in this page, Disable only when i swipe

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

page.html

page.html

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

推荐答案

有几种方法可以做到这一点，基于哪里你想要禁用菜单：

There are several ways to do this, based on where you want to disable the menu:

1. 只在一页上禁用它


2. 在某些页面上禁用它页面（不重复重复相同的代码）


3. 在所有页面中禁用它

< hr>

1）仅在一个页面上禁用它

如果要禁用滑动以在一个页面中查看，最简单的方法是注入 MenuController 实例并使用 swipeEnable（shouldEnable，menuId）方法（ Ionic docs ）。

---

1) Disable it just on one page

If you want to disable the swipe to view in just one page, the easiest way would be to inject the MenuController instance and use the swipeEnable(shouldEnable, menuId) method (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 添加到你的菜单中：

1) If you use the id, then you'll need to add that id to your menu:

< ion-menu [content] =contentside =leftid =menu1>

2）你需要加载视图才能禁用菜单，所以一种方法是使用 ionViewDidEnter event。

2) You need the view to be already loaded to be able to disable the menu, so one way to do it is by using the ionViewDidEnter event.

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

If you want to disable the side menu on some pages (like the login/register page) but you don't want to inject the MenuController on each of those pages and then handle the ionViewDidEnter/ionViewWillLeave, you could use a Custom Decorator. Take a look at this SO answer for more information.

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

If you want to disable the swipe to view everywhere in your app, the easiest way would be to use the swipeEnabled input property (Ionic docs):

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

这篇关于禁用滑动以查看侧面菜单2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！