这是解决ionic3中侧边栏Menu加上底部Tabs的组合demo搭建,这是在ionic3的官网demo中的blank的基础上搭建的组合。
1:下载blank,使用ionic start sidemenuTabs blank命令下载demo
遇到了错误,node-sass@4.7.2的一个错误我们顺便解决一下!
运行npm install -g node-sass@4.7.2 --registry https://registry.npm.taobao.org这个命令将node-sass@4.7.2以全局的方式下载到本地,下载完成后就可以解决问题了!
注意!当你要继续运行一下命令时你首先要将刚才已经下载的sidemenuTabs文件删除,不然会报错!
继续运行ionic start sidemenuTabs blank命令得到如下结果:
表示下载成功!
运行cd sidemenuTabs命令进入下载成功的demo中,
我们运行如下命令下载几个page组件:
ionic g page tabs
ionic g page other
ionic g page about
ionic g page contact
这样我们就下载了四个page组件!
打开demo的pages发现有五个组件包括home(默认下载)、tabs、other、about、contact。
修改src/app/app.component.ts文件如下
//根组件 import {Component, ViewChild} from '@angular/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { TabsPage } from '../pages/tabs/tabs'; import { OtherPage } from '../pages/other/other'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage:any = TabsPage; pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { this.initializeApp(); this.pages = [ {title: 'Tabs Page', component: TabsPage}, {title: 'Other Page', component: OtherPage} ] }
initializeApp() {
this.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. this.statusBar.styleDefault(); this.splashScreen.hide(); }); } 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); } }
修改src/app/app.module.ts代码如下
//根模块 告诉ionic怎么组装应用 //引入angular和ionic的系统模块 import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; //ionic 打包app以后配置启动画面,以及导航条的服务(不用管 ) import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; //引入根组件 import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { OtherPage } from '../pages/other/other'; @NgModule({ declarations: [ /*声明组件*/ MyApp, HomePage, TabsPage, AboutPage, ContactPage, OtherPage ], imports: [/*引入模块 依赖的模块*/ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp],/*启动的模块*/ entryComponents: [/*配置不会在模版中的组件*/ MyApp, HomePage, TabsPage, AboutPage, ContactPage, OtherPage ], providers: [/*配置服务*/ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}修改src/app/app.html代码如下
<ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
修改src/pages/home/home.html代码如下
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> The world is your oyster. <p> If you get lost, the will be your guide. </p> </ion-content>
修改src/pages/tabs/tabs.html代码如下
<ion-tabs> <!--修改 Tabs,让目录结构清晰--> <ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab> </ion-tabs>>
修改src/pages/tabs/tabs.ts代码如下
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { HomePage } from '../home/home'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; /** * Generated class for the TabsPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @Component({ selector: 'page-tabs', templateUrl: 'tabs.html', }) export class TabsPage { tabRoots: Object[]; constructor(public navCtrl: NavController) { this.tabRoots = [{ root: HomePage, tabTitle: 'Home', tabIcon: 'home' },{ root: AboutPage, tabTitle: 'About', tabIcon: 'document' },{ root: ContactPage, tabTitle: 'Contact', tabIcon: 'notifications' } ]; } ionViewDidLoad() { console.log('ionViewDidLoad TabsPage'); } }
这样就可以组合menu+sidemenu的简单demo了,由于我将所有修改的部分的代码都粘贴出来了,所有就不发demo全部代码了,本文是参考了http://www.ionic.wang/article-index-id-108.html并且结合官网的sidemenu与tabs进行我的一点改动而产生的。