ion-menu的使用

直入主题，侧边栏ion-menu的使用

首先新建一个page用来存放侧边栏的内容，这里新建了sidemenu

sidemenu.html内容如下：

如果menu里面没有弹窗的话大概也不需要ion-backdrop,上面两个div就请忽略吧。

实现简单的侧边栏功能，这一页写上ion-menu标签和ion-nav标签就行，先介绍一下ion-menu标签里面属性。

    ion-menu标签里的[content]后面的值一定要对应下面ion-nav的id #menuContent。 type=“push”，push值的意思是侧边栏打开的时候主内容区域也会跟着移动，还有overlay和reveal这两个属性，type值为overlay时，滑动只会打开侧边栏，主内容区域不会跟着移动。type值为reveal时，侧边栏会被主内容覆盖，滑动时移动主内容区域以显示侧边栏。

    (ionOpen)是侧边栏打开之后执行的方法，(ionClose)是侧边栏关闭之后执行的方法,(ionDrag)是手动滑动侧边栏是执行的方法，每次滑动都会执行。 [swipeEnabled]的值为false时可以禁止侧边栏的滑动，因为我所做的项目侧边栏有一个弹窗，弹窗之后打开模态框，发现模态框打开了侧边栏还会滑动，所以做了这个限制。官网上还可以查到这里面可用的许多属性。

    接下来是ion-nav部分，首先 [root]="rootPage"不能漏掉，还有后面的#menuContent一定要与ion-menu对应。swipeBackEnabled作用是是否禁止滑动返回事件，即右滑时是否返回到上级页面。

    接下来在app.component.ts里面配置rootPage的值为创建的这个menu页面，

this. rootPage=SideMenuPage;

这样就简单的实现了侧边栏。

在实际运用中，有很多侧边栏有弹窗的场景，这时候如果type=“push”的话，是需要在主界面自己再加一个模态框的。具体看应用场景。