v-ons-lazy-repeat

このコンポーネント内で描画されるアイテムの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.

Onsen UI provides an element called VOnsLazyRepeat which helps rendering large numbers of items. It will automatically calculate what 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.

Notice that for a simple “load more items” functionality, it is recommended to use VOnsPage‘s infiniteScroll prop instead.

Using the component

VOnsLazyRepeat must we used inside the container component that will held all the items. Frequently it is used together with VOnsList:

<v-ons-list>
  <v-ons-lazy-repeat ...props></v-ons-lazy-repeat>
</v-ons-list>

The items will be rendered as siblings of VOnsLazyRepeat.

Defining an infinite list

VOnsLazyRepeat needs at least two props: length and renderItem. The first one is just a number that indicates the maximum amount of items that could be virtually displayed. The second one must be a generator function like the following:

renderItem(index) {
  return new Vue({
    template: `<v-ons-list-item>...</v-ons-list-item>`;
    // Set item data using 'index'
  });
}

The requirement is that it must return a new Vue component to be attached in the parent list. It must not be mounted already since VOnsLazyRepeat will mount it in the proper place. This generator function gets the index of the item in the list (absolute index, not the index of the visible list) that can be used to initialize the item’s data.

It is possible to import an existing component and extend it as well.

Calculating the height

VOnsLazyRepeat 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, VOnsLazyRepeat 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 prop that gets the element index and returns its approximate height. This can enhance the calculations and allow better scrolling.

calculateItemHeight(index) {
  return myItems[index].image.height;
}

関連情報

Prop一覧

名前 型 / デフォルト値 概要
calculate-item-height Function This function gets an index as its first argument and should return the expected height of the item. This is useful to ease calculations and possibly achieve a better scrolling. (翻訳中) Optional.
length Number Total number of items. (翻訳中) 必須
render-item Function Item generator. This function gets an index as its first argument and must return an unmounted Vue component corresponding to a row in the list. The index should be used to get the necessary data for the new item. (翻訳中) 必須

イベント

名前 概要
refresh VOnsLazyRepeat listens for refresh events in the parent context in order to trigger a refresh when the items change. E.g. $emit('refresh'). It is also possible to call $refs.lazyRepeat.refresh() instead. (翻訳中)
refresh

VOnsLazyRepeat listens for refresh events in the parent context in order to trigger a refresh when the items change. E.g. $emit('refresh'). It is also possible to call $refs.lazyRepeat.refresh() instead. (翻訳中)

パラメーター
名前 概要

お困りですか?

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

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

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