加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

禁用侧面菜单的滑动以打开Ionic 2中的登录页面(或任何页面)的手

发布时间:2020-12-17 07:57:41 所属栏目:安全 来源:网络整理
导读:我是Ionic 2 2的新手. Angular2和我已经使用以下命令下载了一个新的Ionic模板 Ionic start appname sidemenu --v2 --ts 对于这个特定的解决方案,我添加了一个登录页面来验证用户.验证成功后,用户将被导航到使用侧边菜单的菜单页面. 由于该解决方案基于sideme
我是Ionic 2& 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;

  }
}
我认为drag-content指令用于离子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`);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读