在 Ionic 2 中禁用侧面菜单滑动以打开登录页面（或任何页面）的手势

Posted 2023-03-13

【中文标题】在 Ionic 2 中禁用侧面菜单滑动以打开登录页面（或任何页面）的手势

【英文标题】：Disable the side menu's swipe to open gesture for Login page (or any page) in Ionic 2

【发布时间】：2016-08-30 21:08:27

【问题描述】：

我是 Ionic 2 和 Angular2 的新手，我已经使用以下命令下载了一个新的 Ionic 模板

 Ionic start appname sidemenu --v2 --ts

对于这个特定的解决方案，我添加了一个登录页面来验证用户。一旦验证成功，用户将被导航到使用侧边菜单的菜单页面。

由于该解决方案基于sidemenu 模板，因此每当用户向左滑动时，侧边菜单就会显示在登录页面上。

所以有人可以指导我纠正这个错误并在滑动视图时停止显示侧边菜单。

我的代码

App.ts 文件

import App, IonicApp, Platform,MenuController from 'ionic-angular';
import StatusBar from 'ionic-native';
import HelloIonicPage from './pages/hello-ionic/hello-ionic';
import ListPage from './pages/list/list';
import HomePage from './pages/home/home';


@App(
  templateUrl: 'build/app.html',
  config:  // http://ionicframework.com/docs/v2/api/config/Config/
)
class MyApp 
  // make HelloIonicPage the root (or first) page
  rootPage: any = HomePage;
  pages: Array<title: string, component: any>;

  constructor(
    private app: IonicApp,
    private platform: Platform,
    private menu: MenuController
  ) 
    this.initializeApp();

    // set our app's pages
    this.pages = [
       title: 'Hello Ionic', component: HelloIonicPage ,
       title: 'My First List', component: ListPage 
    ];
  

  initializeApp() 
    this.platform.ready().then(() => 
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    );
  

  openPage(page) 
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  

app.html 文件

  <ion-menu side-menu-content drag-content="false"   [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
        p.title
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

Homepage.ts 文件（本例中为登录页面）。

   import Page, Events,Alert,NavController,Loading,Toast,Storage,LocalStorage,SqlStorage from 'ionic-angular';
import  FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl  from 'angular2/common';
import HelloIonicPage from '../hello-ionic/hello-ionic';
import NgZone from 'angular2/core';

@Page(
  templateUrl: 'build/pages/home/home.html'
)
export class HomePage 

 public Uname :string;
 public usrvalid:boolean;
 public usrpwd :boolean;
 public usrpwdlength:boolean;
 public usrvalidlength:boolean;
 public isUnchanged:boolean;
 public usrpwdzero:boolean;
 public usrvaliddigits:boolean;
 rootpage:any;

public Upwd:string;
  constructor(public nav:NavController) 
this.nav=nav;
this.isUnchanged=true;
var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.6,)");

// rootPage: any = HomePage;

  

【参考方案1】：

我认为 drag-content 指令用于 ionic 1，对于 Ionic 2，您可以在页面类文件中禁用它。

您可以通过从ionic-angular 导入MenuController 提供程序来做到这一点，然后调用.swipeEnable(shouldEnableBoolean, menuId) 方法来禁用页面类中的滑动手势（这也记录在here）。

你的登录控制器应该是这样的......

import Page, MenuController from 'ionic-angular';

@Page(
    templateUrl: 'build/pages/home/home.html'
)
export class HomePage 
    constructor(public menu: MenuController) 
        this.menu.swipeEnable(false);
    

如果您有多个菜单并且每个菜单都有一个 id，那么您可以像这样定位特定菜单...

this.menu.swipeEnable(false, `menuId`);

【讨论】：

对于任何无法让 swipeEnable(false) 工作的人，可能是因为您的菜单尚未初始化。如果您尝试在 Hello Ionic 模板上执行此操作，它将无法在构造函数中工作，但会在 platform.ready().then 块内工作

我和提问者有同样的情况，我的代码就像你的回答一样。但是，登录后我导航到页面 A，但那里没有菜单栏图标。然后，我滑动打开菜单列表，再次单击该页面，然后突然出现菜单栏图标。我把这个this.menu.swipeEnable(false); 放在Page A 控制器中。提前致谢。

ionViewDidLoad() this.menu.swipeEnable(false, 'left');

对于否决的选民......在回答时这是一个可行的解决方案，所以不是仅仅投反对票，而是使用更新的解决方案编辑我的答案，这样对其他人会有所帮助： )

如果我从角落滑动，实际上 swipeEnable 工作！我想从页面上的每个位置滑动以打开菜单。除了添加 swipeleft 事件之外还有什么方法吗？ @Will.Harris

【参考方案2】：

您可以随时在任何页面通过调用禁用/启用侧边菜单

$ionicSideMenuDelegate.canDragContent(false)

例如：

angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate)

$ionicSideMenuDelegate.canDragContent(false)

);