ionic：tabs在子页面中隐藏（终极武器）

我会带着你远行 2022-03-08 12:40 200阅读 0赞

**问题描述**：ionic4中tabs在进入二级页面时并不会隐藏，但我们往往需要其隐藏掉。  
**思路**：在试水百度的各种方法后，仍不见效，就有了以下的思路  
tabs在子页面的时候隐藏，那么子页面由路由进入后，地址url改变了，这可以用来区分是子页面还是tabs页面。根据页面，设置tab是否显示，display：none即可  
方法1：在子页面对tabs进行style设置  
方法2：在tabs页面对tabs根据url进行设置  
明显，方法2简单方便于方法1  
**获取url地址**： window.location.href  
**以下是简单的实例**：  
tabs.ts

taburls = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5']; // 要显示tbas的页面，也可以变成子页面（下面的逻辑判断要跟着改变）
    
        isShow() {
            let url = window.location.href.split('/');
            // 判断是否显示tab
            if (this.taburls.indexOf(url[url.length - 1]) > -1) {
                return false;
            }
            return true;
        }

tabs.html

<ion-tabs>
        <ion-tab-bar slot="bottom" [ngClass]="{'noshow':isShow()}">
            <ion-tab-button tab="tab1">
                <ion-icon name="chatboxes"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab2">
                <ion-icon name="filing"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab3">
                <ion-icon name="list-box"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab4">
                <ion-icon name="people"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab5">
                <ion-icon name="person"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

tabs.scss

.noshow{
      display: none;
    }