Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

 アプリの基本動作

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

タブバー

タブバー上でタブを選択すると以下の動作となることが一般的と思われる。
・タブの切り替え(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;
  }
dokura
ブロックチェーン関連の会社で働いています。 最近は クライアントはIonicまたはangular サーバはDjango メインで使っています。 つまづいたことを記載、お役に立てればと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away