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