26

サイドメニュー 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>
4

6 に答える 6

71

メニューを無効にする場所に基づいて、これを行うにはいくつかの方法があります。

  1. 1 ページだけ無効にする
  2. 一部のページで無効にします（同じコードを何度も繰り返さずに）
  3. すべてのページで無効にする

1）1ページだけ無効にする

スワイプを無効にして 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');
   }

}

次の 2 点に注意してください。

1) ID を使用する場合は、それをidメニューに追加する必要があります。

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

2) メニューを無効にするには、ビューが既に読み込まれている必要があるため、ionViewDidEnterイベントを使用する方法があります。

2) 一部のページで無効にする

一部のページ (ログイン/登録ページなど) でサイド メニューを無効にしたいがMenuController、それらの各ページに を挿入してionViewDidEnter/を処理したくない場合は、 Custom DecoratorionViewWillLeaveを使用できます。詳細については、この SO の回答をご覧ください。

3) すべてのページで無効にする

スワイプを無効にしてアプリのどこでも表示したい場合、最も簡単な方法はswipeEnabledinput プロパティ ( Ionic docs ) を使用することです:

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