コンポーネント「ion-refresher」を使ったみた感想

最近のモバイルアプリでよく見かけるようになった、プルダウンで画面やデータの更新を行うコンポーネントがIonic2にもあります。

コンポーネント「ion-refresher」がそれに当たるものですが、どんな感じなのか使ってみたので、以下は実際に使ってみて分かったことのメモになります。

以下は公式サイトに掲載されているコードに少し手を加えたものになります。

◆HTML

<ion-content>
  <ion-refresher (ionStart)="doRefreshStart($event)" (ionPull)="doRefreshPull($event)" (ionRefresh)="doRefresh($event)" >
    <ion-refresher-content 
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-list>
    ...  
  </ion-list>
</ion-content>

「pullingIcon」と「pullingText」は更新するかどうか未確定の状態（スワイプ中）の時に表示され、「refreshingSpinner」と「refreshingText」は更新中に表示されるイメージとテキストになります。未指定の場合はデフォルトのものが表示されます。

「ionStart」「doRefreshPull」「doRefresh」はそれぞれ、プルダウン開始時、プルダウン中、更新処理開始時に呼び出されるイベントです。

◆コンポーネント

@Component({...})
export class Page {
  doRefreshStart(refresher) {
    console.log('doRefreshStart', refresher);
  }

  doRefreshPull(refresher) {
    console.log('doRefreshPull', refresher);
  }

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }
}

更新処理は「doRefresh()」内に実装します。また、処理終了後に「complete()」を呼び出す必要があるようです。

フレームワークの調査中にion-refresherのようなコンポーネントがあることを知って、自前で実装する必要がなくなるものと思って喜びましたが、細部を作りこもうとするとやはり厳しいです。

デザインや使い勝手を考慮せずに機能だけ実装するだけなら非常に便利なコンポーネントであることは間違いありませんが、スクロール可能なコンテンツと合わせて併用すると、スクロールが最上段に到達してから続けざまに「ion-refresher」のプルダウン操作へと移行してほしいのに、スクロール最上段で一度プルダウン中の手を放して、もう一回プルダウンしないと動作しませんでした。

今まで操作したモバイルアプリの中でこの手の更新処理で一番使いやすいと思ったのは、GmailやツイキャスのAndroid版で実装されている方法です。（iOS版はまた違った挙動）

詳しくは実際にアプリを利用してもらいたいのですが、スクロールが最上段に到達すると、スクロール可能なコンテンツはその位置に固定された上で、更新用のアイコンが回転しながら上から下へと落ちてきます。このスクロール最上段から更新処理への移行が非常にスムーズで使いやすいです。

この挙動はどうやらマテリアルデザインの基本ガイドラインに沿ったもののようで、AndroidStudioで開発していれば簡単にできるっぽいのですが、Ionicで同じような処理を実装する方法が見当たりませんでした。

せめてワンアクションでスクロールから更新処理プルダウンへの移行はできるようにしてほしかったですね。もう少し調査はする予定なので、なにかいい解決策、または簡単に独自実装する方法などが分かりましたら、この記事を更新したいと思います。

• Ionic 2 ion-refresher with scroll content - ionic - Ionic