7、侧边栏：Menu

1、单个侧边栏

导航的代码在分析源码的时候已经分析过了，下面只看他的一些应用与方法。

/* ---示例代码----*/
 
<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
    ...
    </ion-list>
  </ion-content>
</ion-menu>
 
<ion-nav #mycontent [root]="rootPage"></ion-nav>
 
/* ---示例代码----*/

上边的代码其实就生成了一个简单的 view

值得注意的 是 #mycontent 和 [content]="mycontent" 其实就形成了一个绑定 告诉 侧边栏 我的内容是 ion-nav里的。

因为ionic 他是把侧边栏的content写到 ion-side-menus 里面的。。所以这里ionic2 比较人性化。代码不会一坨一坨的分不清哪个是写侧边栏列表的，哪个是写内容的。

 

2、多个侧边栏 和 MenuController API

/* ---示例代码----*/
 
<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
 
<ion-nav #mycontent [root]="rootPage"></ion-nav>
 
/* ---示例代码----*/

先看side，side是控制侧边栏在左侧或右侧，默认是左侧。主要看 id ， id的值要是唯一的 。我们给每一个ion-menu 设置了一个id 这个时候 页面进来的时候

那个ion-menu侧边栏在最上面 。就显示哪个 。

导入：import { MenuController } from 'ionic-angular';

我们需要 用 MenuController 来控制 侧边栏的一些方法。其中 this.menu.enable(); 方法就是用来控制多个侧边栏的展示

他可以传两个参数 或者 一个参数。 

    1、两个参数 的话 第一个参数 代表是否显示 第二个参数 是 menuId 值

    2、一个参数的话 就是 menuId 一旦设置一个参数的话其他的侧边栏 也将会隐藏

/* ---示例代码----*/
 
enableAuthenticatedMenu() {
 
  this.menu.enable(true, 'authenticated');
  this.menu.enable(false, 'unauthenticated');
  //或者
  this.menu.enable('authenticated');
 
}
 
/* ---示例代码----*/

MenuController 还有 很多方法。

    1、打开 open()

    2、关闭 close() 这个方法可以带一个参数 menuId

    3、切换 toggle(menuId) 这个方法可以带一个参数 menuId 当侧边栏打开则关闭，关闭则打开

    4、enable(show，menuId) 控制多个侧边栏。两个参数或一个参数。

    5、swipeEnable(shouldEnable,menuId)  第一个参数代表是否禁用，第二个参数是 哪个menuId

    6、isOpen() 侧边栏是否打开。

    7、isEnabled() 判断有没有侧边栏能够被打开。

    8、get(menuId) 返回一个侧边栏的实例

    9、getMenus() 返回所有侧边栏的实例。

3、侧边栏的API

 

例如：

<ion-menu id="menu" [content]="content"  >

 

1、content      对应内容。

2、id    侧边栏Id

3、side   侧边栏的位置

4、type   侧边栏的显示类型

5、enabled    侧边栏是否可用

6、swipeEnabled   侧边栏是否可以滑动展出

7、persistent   是否应该坚持子页面菜单。