ionic3 底部Tabs切换菜单结合侧边栏sidemenu

今天给大家说说ionic3 底部Tabs切换菜单结合侧边栏sidemenu一起使用Ionic 3中带有三个可以在项目中使用的模板,即blank,sidemenu和tabs。


在本教程中,我们将从blank模板开始,异步异步将sidemenu与tabs模板结合在一起。

 


第一步:打开命令行工具/终端并运行以下命令。


ionic start sidemenuTabs blank
cd sidemenuTabs

 

在这里我们命名我们的项目sidemenuTabs。


第二步:打开src \ app \ app.component.ts并对其进行如下代码。

 

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
 
import { OtherPage } from '../pages/other/other';
import { TabsPage } from '../pages/tabs/tabs';
 
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
 
  rootPage: any = TabsPage;
 
  pages: Array<{title: string, component: any}>;
 
  constructor(public platform: Platform) {
    this.initializeApp();
 
    // used for an example of ngFor and navigation
    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.
      StatusBar.styleDefault();
      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.html并放入下面的代码。







第四步:现在我们来创建一些其他页面了。如图所示代码到现在我们已经使用了两页,即TabsPage和OtherPage。Ionic提供了使用命令行创建页面的更大方法。确保您在项目文件夹内,现在运行以下命令。




ionic g page tabs
ionic g page other




当我们在这里时,我们在创建Ionic3的关于我们和联系我们的页面




ionic g page about
ionic g page contact




总而言之,我们现在已经创建了5个页面,about,contact,home,other,tabs。该home页面默认使用空白模板创建



到目前为止,我们编写的代码只创建了sidemenu一些页面。现在是时候合并tabs模板了。



第五步:配置tabs页面实现我们的tab切换


打开src \ page \ tabs \ tabs.ts并将其编码如下








第六步:配置tabs页面实现我们的tab切换


上面ts配置好以后现在我们开始编辑tab组件的视图页面。


找到src \ page \ tabs \ tabs.html 并按如下所示进行编码。





第七步:在每个ionic 页面里面编辑一些内容,方便我们知道到底是什么页面


对于其余的页面,我们将放置简单的占位符代码,让我们知道页面之间的区别。为此,我们将在所有页面中添加相同的代码,但是相应地更改每个页面的标题。


因此,联系页面打开src \ pages \ contact \ contact.html并按如下所示进行编码




第八步:把对应的模块依赖注入


我们创建了所有的页面组件,但是Angular 2不会关联它,除非它们被声明@NgModule。


要这样做,打开src \ app \ app.module.ts并对其进行如下代码。







这里我们将所有页面添加到declarations数组以及entryComponents数组。


要记住的是,我们已经在侧面菜单中创建了选项卡组件。这意味着整个选项卡组件将在ion-nav标签中的侧面菜单模板中显示为一个页面。标签组件中加载的页面将被加载到ion-tab标签中。




结论


在我看来,Side Menu和Tabs模板的组合应该是一个ionic模板。但是,正如你刚刚看到的那样,并不是太复杂。要记住的一件事是,一旦你有这样一个嵌套的模板处理,后退按钮需要特别的注意,因为用户可能想回去上一个选项卡,但可能会回到一页。

如果您想立即开始使用,可以使用以下命令创建一个新的ionic项目,以获取sidemenuTabs模板。



ionic3 底部Tabs切换菜单结合侧边栏sidemenu 的demo:



https://github.com/seanmavley/ionic2-sidemenu-tabs