ons-lazy-repeat

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

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

実例

Infinite lists

In mobile apps it is often necessary to display very large lists of items. One problem with this is that a large number of DOM elements must be created which can affect performance.

For AngularJS, Onsen UI provides a directive called ons-lazy-repeat which helps rendering large numbers of items. It will automatically calculate which elements are visible and only render those. When the user scrolls it will remove items that are outside the screen and add elements that become visible dynamically.

Using the element

The element is attached as a children of an <ons-list> item:

<ons-list ng-controller="ListController as list">
  <ons-list-item ons-lazy-repeat="list.delegate">
    {{ item }}
  </ons-list-item>
</ons-list>

The items will be rendered in the same position as the element is defined.

The delegate object

To use the element an object called the delegate must be defined. This object contains information about how to create a new item and how many items are in the list.

ons.bootstrap()
 .controller('ListController', function() {

    this.delegate = {
      configureItemScope: function(index, itemScope) {
        // Prepare the item scope.
      },

      countItems: function() {
        // Return the number of items here.
      },

      calculateItemHeight: function(index) {
        // Return the height of the item at position `index`.
      },

      destroyItem: function(index, element) {
        // Remove event listeners, etc. here to avoid memory leaks.
      }
    };
 });

In order to refresh the list when the data has changed, refresh method is exposed in the delegate object: this.delegate.refresh().

Calculating the height

<ons-lazy-repeat> can dynamically calculate the height of every item once they are rendered, but in order to know how many items it should render beforehand we must provide a hint. By default, <ons-lazy-repeat> pre-renders the very first item and takes its height to do the calculations.

However, it is also possible to pass an optional calculateItemHeight function in the delegate object that gets the element index and returns its approximate height. This can enhance the calculations and allow better scrolling.

list.delegate = {
  ...
  calculateItemHeight: function(index) {
    return heights[index];
  },
  ...
}

関連情報

名前 型 / デフォルト値 概要
ons-lazy-repeat Expression 要素のロード、アンロードなどの処理を委譲するオブジェクトを指定します。AngularJSのスコープの変数名や、通常のJavaScriptの変数名を指定します。 Optional. 初期化時のみ有効
名前 概要
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()

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

お困りですか?

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

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

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