OnsLazyRepeat Directive ([ons-lazy-repeat])

<ons-lazy-repeat>要素と同じ機能を提供するAngularディレクティブです。

このコンポーネント内で描画されるアイテムのDOM要素の読み込みは、画面に見えそうになった時まで自動的に遅延され、 画面から見えなくなった場合にはその要素は動的にアンロードされます。 このコンポーネントを使うことで、パフォーマンスを劣化させること無しに巨大な数の要素を描画できます。

実例

Lazy Repeat

Lazy Repeatを利用すると数千数万の要素を持つバーチャルリストを作ることができます。レンダリングエンジンの仕組み上、DOM要素を持てば持つほどレンダリングは遅くなります。モバイル環境では数千数万レベルの長いリストを作ることはパフォーマンスの劣化につながりますが、このLazy Repeatを使うと仮想的に長いリストをパフォーマンスを劣化させること無くレンダリングすることができます。

Angular 2ではOnsLazyRepeatディレクティブを通じてLazy Repeatを利用することができます。

<ons-list>
  <ons-list-item *onsLazyRepeat="let item of items; let i = index">
    <div class="center">
      #{{i}} msg: {{item.msg}}
    </div>
  </ons-list-item>
</ons-list>

更新する

Lazy Repeatで作成したリストをレンダリングし直したい場合には、OnsLazyRepeatディレクティブのrefresh()メソッドを使います。OnsLazyRepeatディレクティブを取得するには、ViewChildデコレータを通じて取得します。

export class AppComponent {
  @ViewChild(OnsLazyRepeat) lazyRepeat;

  refresh() {
    this.lazyRepeat.refresh();
  }
}

関連情報

プロパティ概要

名前 概要
delegate 要素のロード、アンロードなどの処理を委譲するオブジェクトを指定します。
delegate.createItemContent

この関数はHTMLElementを返してください。 要素を生成しやすくするために、現在のアイテムのインデックスとテンプレートが引数に渡されます。 このテンプレートは、<ons-lazy-repeat>要素のコンテンツが渡されます。

delegate.countItems リスト内のアイテム数を返してください。
delegate.calculateItemHeight

アイテムの高さ(ピクセル)を返してください。アイテムのインデックス値は引数で渡されます。 この関数は、それぞれのアイムが違った高さを持つリストをレンダリングする際に重要です。 この関数はオプショナルです。もしこの関数が無い場合には、 最初のアイテムの高さが他のすべてのアイテムの高さとして利用されます。

delegate.destroyItem

この関数は、あるアイテムがDOMツリーから除かれた時に呼び出されます。 アイテムのインデックス値とDOM要素が引数として渡されます。 この関数はオプショナルですが、各アイテムの後処理が必要な場合にはメモリーリークを避けるために重要です。

delegate.configureItemScope Function which recieves an index and the scope for the item. Can be used to configure values in the item scope. (翻訳中)

メソッド

シグネチャ 概要
refresh() リストを更新します。もしデータが変わった場合にはこのメソッドを使ってください。
refresh()

リストを更新します。もしデータが変わった場合にはこのメソッドを使ってください。

Inputs

名前 概要
onsLazyRepeat let of式を指定します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。