ons-lazy-repeat: Support for dynamic height.

[rgins16]

This feature was just released with the newest version of OnsenUI. Can someone explain this to me? I don’t understand.

ons-lazy-repeat: Support for dynamic height.

The documentation for ons-lazy-repeat has not been updated.

[Fran Diox]

@rgins16 The API is still the same so there’s no need to change the docs. Before, if your items had different heights, you had to supply calculateItemHeight function for it to work properly. If you didn’t provide the exact height, the items were displayed incorrectly. From now on, it works even if you omit this parameter. However, it is still possible to pass it to improve some calculations that LazyRepeat has to make.

Concretely, in order to know how many items it should create when scrolling down, it needs to know the height of the items beforehand. This is where providing a precise calculateItemHeight helps since it will accurately create the necessary number of items.

If you don’t provide it, it takes the height of the very first item and uses it for this calculation, what can lead to creating some more items than the strictly necessary (or fewer). This, in general, is not a big issue and will only be noticed if your items can have very different heights from each other. Once the items are rendered, it takes their actual height and uses that for everything else so it doesn’t go in any error state.

Imagine, for example, that the first item of your list is height: 50px, but all the rest are height: 200px. If you don’t provide calculateItemHeight, it will take 50px for the calculations. Therefore, if you scroll down something like 600px, it will create 12 new items instead of just 3. I believe this is a weird situation and normally calculateItemHeight can be safely omitted.

I hope it’s a bit clearer now :sweat_smile:

[rgins16]

@Fran-Diox Awesome! This directly affects my project in a beneficial way. Thanks.