[Ionic]アプリの基本動作「タブバーの自動スクロール」と「引っ張り更新」

　アプリの基本動作

調べると比較的にすぐ出てくるが、覚えがき

タブバー

タブバー上でタブを選択すると以下の動作となることが一般的と思われる。
・タブの切り替え(Ionicでタブのプロジェクトで作成すれば、特に修正不要)
・アクティブなタブの上にページがスタックされた状態でタブをクリック
　→上のページがクリアされる（こちらのNavControllerを利用していれば、特に修正不要）
・アクティブなタブの上にページがスタックされていない状態でタブをクリック
　→ページが一番上（または下）に自動スクロール（今回記載）

引っ張り更新

下に引っ張るとリロード

対応

タブバーの自動スクロール

対象のページのtsの修正が必要

// 必要なimport
import {ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';

export class HomePage {
  @ViewChild(Content) content: Content;

  // アクティブかつページがスタックされていない状態で呼ばれるevent
  ionSelected() {
    this.content.scrollToTop();
    // scrollBottom()等あるので、スクロール方法に合わせる
  }
}

引っ張り更新

対象のページ(ion-content内が自動でスクロールされる)の
html, ts, 背景白色になるので、背景色を変えている場合は、scssの修正が必要

<ion-content>
  <ion-refresher
    (ionRefresh)="doRefresh($event)">
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>

  ここにリストなどの表示処理を記載
</ion-content>

引っ張り更新イベントの処理を書く

export class HomePage {
  doRefresh(refresher) {
    // ここに更新時の処理を追加

    setTimeout(() => {
      refresher.complete();
    }, 2000);
  }
}

背景を透過したかったので、SCSSで背景色を消す

  ion-content {
    background-color: rgba(0,0,0,0) !important;
  }