v-ons-lazy-repeat

Using this component a list with millions of items can be rendered without a drop in performance. It does that by “lazily” loading components into the DOM when they come into view and removing items from the DOM when they are not visible.

Tutorial

See also

Props

Name Type Default Value Description
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. Required.
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. Required.

Events Summary

Name Description
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.

Events

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.

Parameters
Name Type Description

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.