ionic3.x - 如何添加 tabs, 如何取消二级页面的 底部导航(tabs), 如何修改返回按钮

一.  如何添加底部 tabs

1. 创建新页面

ionic g page newsPage

2. 在 app.module.ts 中引入 注册

//页面 自定义的组件
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { NewsPage } from "../pages/news/news"
import { NewsInfoPage } from "../pages/news-info/news-info"

 

declarations: [   /*申明组件*/
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],
 entryComponents: [   /*配置不会在模板中使用的组件*/
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NewsPage,
    NewsInfoPage
  ],

3. 在 tabs.ts 页面中配置

 

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { NewsPage } from '../news/news'
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = NewsPage;
  constructor() {
  }
}

tabs.html:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="new" tabIcon="apps"></ion-tab>
</ion-tabs>

 


 

二. 如何取消二级页面的底部tabs, 如何修改返回按钮

 

 imports: [  /*引入的模块 依赖的模块*/
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,  //-- 影藏全部子页面的 tabs
      backButtonText: '返回' // -- 配置返回按钮
    })
  ],

 

posted @ 2019-10-24 10:32  monkey-K  阅读(313)  评论(0编辑  收藏  举报