Ionic4.x中侧边栏结合底部tabs切换教程

ionic4.x项目中我们可以通过ionic start myApp sidemenu 生成一个带侧边栏的项目。但是默认情况带侧边栏的项目没有底部tabs切换。下面我们看看ionic4底部 tabs 结合侧边栏 ion-menu的实例。

1、项目根组件 app.component.html 默认情况app.component.html根组件代码如下

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

2、接下来我们在 ion-router-outlet中加入main属性，然后在 ion-router-outlet上面加入 ion-menu，这样的话ionic4底部 tabs 的项目就有侧边栏了

代码如下：

<ion-app>
  <ion-menu swipe-gesture=true>
    <ion-header>
      <ion-toolbar>
        <ion-title>菜单</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>

        <ion-menu-toggle auto-hide="false">
          <ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet main></ion-router-outlet>
</ion-app>