禁用滑动以查看侧边菜单 ionic 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

<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. 在所有页面中禁用它

<小时>

1) 仅在一页上禁用它

如果您想禁用滑动以仅在一页中查看，最简单的方法是注入 MenuController 实例并使用 swipeEnable(shouldEnable, menuId)方法(Ionic 文档).

---

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:

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

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 文档):

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>

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