How to dynamically calculateItemHeight or set it to the height of the content on Lazy Repeat?

[Norton Gumbo]

I need help calculating the item height on lazy repeat. I don’t want to set a static height but I want it to be the height of the content inside the repeat. Is this possible?

[IliaSky]

Hi Norton,

Lazy repeat is meant to be used for thousands of items. In the cases when you use it it will probably be a bad idea to have dynamic sizes for each item. It’s better if the size is either a constant for all items or you have several possible values (for example coming from 2 or 3 possible image sizes).

Having dynamic sizes for each element based on text or something similar can be a hard thing to calculate without first putting it in the dom, which is a very expensive operation and would defeat the purpose of the lazy repeat. There is one exception to this rule - if all of your items are expected to have the same size you can omit providing the calculate function (in Onsen 2).

So if you’re using Onsen 2 and expect to all items to have the same height, but don’t know the value you can leave it to Onsen to calculate it automatically.

Otherwise you can provide a function which returns whatever height you want.

Lets say you have 3 types small, medium and big which are changing:

var items = [
	{size: 'small', text: 'lorem ipsum...'},
	{size: 'medium', text: 'dolor sit ...'},
	{size: 'big', text: 'amet aleq...'}
];

var sizes = {
	small: 40,
	medium: 70,
	big: 100
};

something.delegate = {
	// ...
	calculateItemHeight: function(index) {
		var item = items[index];
		return sizes[item.size];
	}
};

Or something similar. Since this function will be called an obscene amount of times it should be as simple as possible. Having only a handful of values is suggested.

Anyway you never mentioned what your items would look like. If you want each item to have a somewhat random height I suggest just using something like ng-repeat where the items will be placed in the dom in a normal fashion. With lazy repeat only items around the visible part of the screen are in the dom the others are not, which is why this function is necessary. If all items had dynamic heights then the function would lose its meaning.

If you still want to try to use it with completely dynamic values for each item it would not be impossible, but it would probably be relatively hard and the performance may become worse than simply adding all items in some cases (with say a couple hundred items).

[Norton Gumbo]

@IliaSky Thanks for the reply. Each of my items would be a block of text. I only wanted to use lazy repeat for infinite scroll because I will be making api calls that return a paginated response and I wanted to do an endless scroll where if I got close to the bottom then I get more items and loaded them. I want to use ng-repeat but I’m not sure how to make a call once I’ve scrolled down a certain height or reached a certain element.

[Fran Diox]

@Norton-Gumbo Check the attributes and props of ons-page. You can use infinite scrolling there. It’s a better solution than lazy repeat for this problem.

[Norton Gumbo]

@Fran-Diox said:

attributes and props of ons-page

Thank you for the response, that solved my issue!