ionic リフレッシュを実装してみた ion-refresher

ion-refresherとは

こんな感じのツイッターとかインスタで下に引っ張って更新するやつ。

使い方

• html

注意点：必ず、ion-content 内で使用すること。
公式ドキュメントにも以下のように書かれています。

The refresher provides pull-to-refresh functionality on a content component.

html

<ion-header>
    <ion-toolbar>
        <ion-title>
            Tab Three
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-refresher (ionRefresh)="refreshAction($event)" slot="fixed" pullMin="40" pullMax="80">
        <ion-refresher-content pullingIcon="arrow-dropdown"
                               refreshingSpinner="circles">
        </ion-refresher-content>
    </ion-refresher>
    <ion-list *ngFor="let item of items">
        <ion-item>
            <ion-label>{{item}}</ion-label>
        </ion-item>
    </ion-list>
</ion-content>

• typescript

typescript

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

@Component({
    selector: 'app-tab3',
    templateUrl: 'tab3.page.html',
    styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
    items = [];

    ngOnInit(): void {
        this.items.push(1);
    }

    refreshAction(event) {
        setTimeout(() => {
            this.items.push(this.items.length + 1);
            event.target.complete();
        }, 500);
    }
}

参照

https://ionicframework.com/docs/api/refresher
https://ionicframework.com/docs/api/refresher-content