7、侧边栏：Menu

时间：2016-06-06 06:47:27 阅读：188 评论：0 收藏：0 [点我收藏+]

标签：

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 是否应该坚持子页面菜单。

7、侧边栏：Menu

标签：

原文地址：http://www.cnblogs.com/dandingjun/p/5562564.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行