关于ionic3里sidemenu与tabs结合使用的一些理解。

最近正在学习angular4和ionic3，打算做一个网易云音乐手机版来练练手。不过刚开头就卡住了。

下边是网易云音乐的首页。

头部有一个侧边栏和三个tabs加一个搜索框。

刚开始我觉得用一个menu模板然后引入tabs组件置于顶部就可以了。

可是发现menu的根和tabs的根不一样。当需要导航的时候必须在每一个页面引入头部组件。至于原因在这里。

app.components.ts

 openPage (page) {    // Reset the content nav to have just this page    // we wouldn't want the back button to show in this scenario    this.nav.setRoot(page.component);  }

当点击侧边栏里的选项时会将根页面改变。所以需要把这句话去掉。

去掉之后在进行导航的时候恢复了正常，但是当我看向浏览器的地址时，发现了个问题。

首页前边竟然有两个父辈。有强迫症的我，很难容忍。首页竟然不是根路径！！！

看了看代码发现。tabs是一个组件，不是初始的根页面。

悲催的我好后悔用menu模板。只能从开个项目使用tabs模板。

然后置顶，引入menu组件，再然后。。。。。。

好了，还是直接上效果图吧。

是不是丑爆了！！！

下边是具体的实现步骤。

1. 首先，需要下载一个tabs模板（当然要是想下menu或者空白模板也无所谓，只要你没有强迫症）。

然后对app.html页面进行更改：

<ion-menu [content]="content"><ion-header><ion-toolbar><ion-title>Menu</ion-title></ion-toolbar></ion-header><ion-content><ion-list><buttonmenuCloseion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button></ion-list></ion-content></ion-menu><ion-nav #content [root]="rootPage"></ion-nav> //这里需要写#content进行本地绑定

2.对app .component.ts进行修改

import {Component }from'@angular/core';import {Platform }from'ionic-angular';import {StatusBar }from'@ionic-native/status-bar';import {SplashScreen }from'@ionic-native/splash-screen';import {TabsPage }from'../pages/tabs/tabs';@Component({templateUrl:'app.html'})exportclassMyApp {rootPage:any = TabsPage;pages:Array<{title:string,component:any}>;//定义一个数组constructor(platform:Platform,statusBar:StatusBar,splashScreen:SplashScreen) {platform.ready().then(()=> {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.statusBar.styleDefault();splashScreen.hide();});this.pages = [//这是侧边栏里的内容{title:'Home',component:'HomePage' },{title:'List',component:'ListPage' }];}openPage(p){//在这里可以写点击后需要跳转到那个组件 p.component就是组件名字}}

3.对tabs进行更改。

html文件

<button ion-button icon-only menuToggle class="headermenu"><ion-icon name="menu"></ion-icon></button><ion-tabs tabsPlacement="top"class="header"><ion-tab [root]="tab1Root"tabIcon="musical-notes"></ion-tab><ion-tab [root]="tab2Root"tabIcon="information-circle"></ion-tab><ion-tab [root]="tab3Root"tabIcon="contacts"></ion-tab></ion-tabs><button end class="headersearch"ion-button icon-only (click)="openModal()"><ion-icon name="search"></ion-icon></button>

scss文件

page-tabs{.header{>div{height:57px;padding:015%;background-color:red!important;}}.headermenu{position:relative;top:2px;z-index:999;background-color:red!important;box-shadow:0000!important;}.headersearch{position:absolute;top:3px;right:0px;box-shadow:0000!important;background-color:red!important;}}

ts文件

import {Component }from'@angular/core';import {AboutPage }from'../about/about';import {ContactPage }from'../contact/contact';import {HomePage }from'../home/home';import {NavController }from'ionic-angular';@Component({selector:'page-tabs',templateUrl:'tabs.html',})exportclassTabsPage {tab1Root = HomePage;tab2Root = AboutPage;tab3Root = ContactPage;constructor(publicnavCtrl:NavController) {}}

4.把home ，about contact 三个组件里的header删除。至于原因，自己试试结果就知道了。

好了，到这一步就完成的,是不是感觉非常简单，可是TM的我整了整整一天。

还有不得不吐槽ionic的图标。真是丑的都不能见人了。

里边的一些解释和自己的一些见解：

1.步骤一里添加了一个menu组件的代码，并将它绑定在导航上边（#content）。它的使用是在tabs里。至于为什么可以在tabs里边调用menu。可以自己看看ionic英文官网对导航的解释。

2.步骤二中没什么可以说的。主要是点击侧边栏时不再导航为根页面了。

3.步骤三里边我是直接把tabs置顶，并在其前后添加了两个按钮。所以这里的根页面跟以前一样没有变化还是那三个。这里主要的还是样式。

其实整个功能实现起来并不难，并且有很多种实现方式。之所以用了一天主要原因是对ionic的初始导航不太理解。

下边是完成之后的截图。