Question

我正在关注一些好的example，您可以在同一个应用程序中创建两个侧边菜单（右侧和左侧）。以上链接中的示例基于Ionic版本1，但我在Ionic v2中寻找相同的内容。

预期

单击左侧菜单按钮时应打开左侧菜单（如果已打开则应关闭右侧菜单）

当我们点击右键时，这应打开右侧菜单（如果已经打开则应关闭左侧菜单）

app.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>LEFT MENU</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>                             
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                ABC
                <ion-icon name="contact" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                XYZ
                <ion-icon name="person" item-right></ion-icon>
            </ion-item>

            <ion-list-header>User</ion-list-header>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Forget Password
                <ion-icon name="key" item-right></ion-icon></ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Logout
                <ion-icon name="lock" item-right></ion-icon>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.js

import { Component } from '@angular/core';
import { Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { WelcomePage } from '../pages/welcome/welcome';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any = WelcomePage;

  constructor(public platform: Platform) {}

}

welcome.html

<ion-header>
  <ion-toolbar color="danger">
    <button ion-button menuToggle icon-only (click)="openMenu()">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openUserProfile()">
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

welcome.ts

import { Component } from '@angular/core';
import { NavController, NavParams, MenuController } from 'ionic-angular';

@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html'
})
export class WelcomePage {

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams, 
    public menu: MenuController) {

    menu.enable(true);

  }    

  openMenu() {
    this.menu.toggle();
  }

  openUserProfile(){
      // how to open another (right) menu
  }

}

请指导我一些好的例子和概念。

提前感谢你。

Answer 1

很少添加代码，我已达到目标。

<强> app.html

描述：添加两个菜单，其中side ='left / right'并提供id

<ion-menu [content]="content" side="left" id="menu1">
    <ion-header>
        <ion-toolbar>
            <ion-title>LEFT MENU</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>                             
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                ABC
                <ion-icon name="contact" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                XYZ
                <ion-icon name="person" item-right></ion-icon>
            </ion-item>
        </ion-list>               
    </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
    <ion-header>
        <ion-toolbar color="danger">
            <ion-title>USER PROFILE</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Forget Password
                <ion-icon name="key" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Logout
                <ion-icon name="lock" item-right></ion-icon>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<强> app.component.js

app.js

没有变化

<强> welcome.html

描述：定义使用参数调用函数的单击事件。由于侧边菜单都调用相同的函数，让我们传递一些参数，以便在welcome.ts中我们可以使用这些参数打开特定的侧边菜单

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons left>
        <button ion-button icon-only (click)="openMenu('main')">
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="openMenu('user')">
            <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

<强> welcome.ts

描述：在'openMenu'函数中，基于我们得到的参数，让我们添加'IF'条件，它将负责处理要调用的侧边菜单。要打开特定菜单，请将该菜单设置为“true”，将其他菜单设置为“false”，如以下代码中所定义

import { Component } from '@angular/core';
import { NavController, NavParams, MenuController } from 'ionic-angular';

@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html'
})
export class WelcomePage {

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams, 
    public menu: MenuController) {

    menu.enable(true);

  }  

  openMenu(evt) {
      if(evt === "main"){
         this.menu.enable(true, 'menu1');
         this.menu.enable(false, 'menu2');
      }else{
         this.menu.enable(true, 'menu2');
         this.menu.enable(false, 'menu1');
      }
      this.menu.toggle();
  }

}

就是这样。我们的目标是在Ionic 2 中处理单页上的两个侧边菜单。

如果您有任何更好的建议，请与我们联系。

祝你有个美好的一天..！

在同一个Ionic 2应用程序

1 个答案: