Ionic4でスクロール時にタブを固定したい

Question

ionicを勉強しているものです。無限スクロールを実装したのですが
スクロールさせるとタブが画面下に固定されずに動いてしまいます。

初期状態

スクロール時

home.html

<ion-header>
  <ion-toolbar>
    <ion-title>スクロールテストページ</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
    <div class="ion-padding">
      <ion-list>
        <ion-item *ngFor="let item of items">{{item}}</ion-item>
      </ion-list>

      <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>

    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon name="home"></ion-icon>
          ホーム
        </ion-tab-button>
        <ion-tab-button tab="contact">
          <ion-icon ios="ios-notifications" md="md-notifications"></ion-icon>
          通知
        </ion-tab-button>
        <ion-tab-button tab="settings">
          <ion-icon name="ios-add-circle"></ion-icon>
        </ion-tab-button>
        <ion-tab-button tab="settings">
          <ion-icon ios="ios-chatboxes" md="md-chatboxes"></ion-icon>
          メッセージ
        </ion-tab-button>
        <ion-tab-button tab="settings">
         <ion-icon ios="ios-person" md="md-person"></ion-icon>
        　マイページ
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
</ion-content>

home.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  items = [];
  numTimesLeft = 5;
  constructor(
    private router:Router,
  ){
    this.addMoreItems();
  }

  loadData(event){
    setTimeout(() => {
      console.log("Done");
      this.addMoreItems();
      this.numTimesLeft -= 1;
      event.target.complete();
    }, 2000);
  }

  addMoreItems(){
    for(let i=0; i < 16; i++){
      this.items.push(i);
    }
  }
}

実装参考
https://www.youtube.com/watch?v=M86HPj_YuXQ

スクロール時も常に画面下にタブを固定させたいのですがうまくできません。
Googleで検索してもなかなかヒントが得られませんでした。
ionicの実装が得意な方がいましたらご回答いただけないでしょうか？
よろしくお願いいたします。

Answer 1

Tabsの扱い方が間違っています（Routerに載せて使うものなので、ページ内に配置しません）。 ionic start からテンプレート tabs を選択できますので、一度そちらをご確認いただければと思いますー！

Comments

[Linkey]

ionic start tabでやってみたところできました。
ありがとうございました。