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(showmenuId) 控制多个侧边栏。两个参数或一个参数。
    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   是否应该坚持子页面菜单。
posted @ 2016-06-06 01:14  淡定君  阅读(1518)  评论(0编辑  收藏  举报