Ionic 4:滚动时隐藏ion-tab-bar，就像LinkedIn应用程序一样

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="person"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-app>

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <ion-content (ionScroll)="onScroll($event)">
    <!-- 内容区域 -->
  </ion-content>
  <ion-tab-bar slot="bottom" [hidden]="isTabBarHidden">
    <!-- tab按钮 -->
  </ion-tab-bar>
</ion-app>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  isTabBarHidden: boolean = false;

  onScroll(event) {
    if (event.detail.scrollTop > 0) {
      this.isTabBarHidden = true;
    } else {
      this.isTabBarHidden = false;
    }
  }
}