tabs页面跳转子页面，隐藏tabs；返回tabs页面，显示tabs问题

问题界面效果如下：

 


解决方法1

 适用情况：tabs页面有且仅有一个tabs。

 步骤：在app.module.ts,imports中的【IonicModule.forRoot(MyApp)】替换成如下代码

IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true',         //隐藏全部子页面tabs
backButtonText: '',
backButtonIcon: 'ios-arrow-back-outline',//统一返回按钮图标
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom'
}),

 效果：

 


 缺点：如果有多个tabs的话，只会隐藏最内层的tabs

解决方法2

 适用情况：tabs页面有且仅有一个底部tabs

 步骤：在子页面添加如下代码

export class HomePage {
...
constructor(...) {
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'none';
});
}
}

ionViewDidLeave(){
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'flex';
});
}
}
...
}
 效果：

 


 缺点：如果有多个tabs的话，跳转子页面隐藏所有tabs没有问题，返回tabs页面，顶端tabs会遮住页面内容。问题如下图 

 


解决方法3

 适用情况：tabs页面有多个tabs

 步骤：（说明：tabs页面有底部tabs，my-test页面有顶部tabs，about页面是两个tabs中间的内容，home页面是about页面点击item后跳转的页面）

 1.在tabs页面ts文件都要添加以下代码

 顶部的tabs(代码中“...”省略的代码）

import {HomePage} from "../home/home";
import {AboutPage} from "../about/about";
...
export class MyTestPage {
@ViewChild('topTabs') tabRef: Tabs;
mb: any;
public orderTabs = [
{url:AboutPage,title:"全部",params: {status:''} ,number:""},
{url:AboutPage,title:"待确认",params: {status: '0' } ,number:""},
{url:AboutPage,title:"待付款",params: {status:'1' } ,number:""},
{url:AboutPage,title:"已付款",params: {status:'2' } ,number:""},
];

constructor(...,private elementRef: ElementRef,
private event: Events,private renderer: Renderer) {
}

...

ionViewDidLoad(){
let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
this.event.subscribe('hideTabs1', () => {
this.renderer.setElementStyle(tabs, 'display', 'none');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content');
if (content != null){
this.mb = content.style['margin-top'];
this.renderer.setElementStyle(content, 'margin-top', '0')
}
});
this.event.subscribe('showTabs1', () => {
this.renderer.setElementStyle(tabs, 'display', '');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content');
if (content != null){
this.renderer.setElementStyle(content, 'margin-top', this.mb)
}
})
}
queryElement(elem: HTMLElement, q: string): HTMLElement {
return <HTMLElement>elem.querySelector(q);
}
}
 底部的tabs(代码中“...”省略的代码）

import {Renderer, ViewChild, ElementRef} from '@angular/core';
import {Events, Tabs} from "ionic-angular";

export class TabsPage {

...

@ViewChild('myTabs') tabRef: Tabs;
mb: any;

constructor(private elementRef: ElementRef,private event: Events,private renderer: Renderer) {

}

ionViewDidLoad(){
let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
this.event.subscribe('hideTabs', () => {
this.renderer.setElementStyle(tabs, 'display', 'none');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content
4000
');
if (content != null){
this.mb = content.style['margin-bottom'];
this.renderer.setElementStyle(content, 'margin-bottom', '0')
}
});
this.event.subscribe('showTabs', () => {
this.renderer.setElementStyle(tabs, 'display', '');
let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
let content = this.queryElement(SelectTab, '.scroll-content');
if (content != null){
this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
}
})
}

queryElement(elem: HTMLElement, q: string): HTMLElement {
return <HTMLElement>elem.querySelector(q);
}
}

 2.进入子页面，隐藏tabs；离开子页面，显示tabs。如下代码(代码中“...”省略的代码）

import { Events } from 'ionic-angular';
...

export class HomePage {
...
constructor(private event: Events) {
...
this.event.publish("hideTabs");
this.event.publish("hideTabs1");
}

ionViewDidLeave(){
this.event.publish("showTabs");
this.event.publish("showTabs1");
}

}

 效果：

 

 


缺点：代码复杂。