Virtual List: how to properly define 'height' function for items with variable content

1

We are working with a virtualList to display hundreds items with variable content, without render delays.

The performance it’s great, but we were experiencing scroll “jumps” so we redefine the height property, not as a constant but as a function, inspired in this post.

...
// height: app.theme === 'ios' ? 139.2 : (app.theme === 'md' ? 155.1 : 145)
height: (item) => {
  let compiledTemplate = Template7.compile(itemTemplate);
  $(".lista-resultados").append(compiledTemplate(item));
  let height = $$('#resultado-item-' + item.id).height();
  return height;

}

With this approach, the scroll issue it’s seems to be improved, but the performance has decreased significantly.

Someone has a better solution for this cases of items with variable height?

Thanks in advance!!

2

What you are doing is super slow even in theory. If you want fast performance you shouldn’t query the DOM sizes, it is always slow. Ideally it is designed to be used with checking item object and based on that decide the size.

For example if item has image then height should be 100, otherwise 40.

3

Thanks Vladimir.

I’ve supposed the ‘append’ was not a good idea… Indeed, if it was as simple than that, maybe the framework would do it automagically.

After many frustrated intents to calculate the correct height for each case, we decided apply some CSS tricks (vertical alignment, margin, padding, etc) to fix items height independently of their content.

Finally, I would like to thank you so much for your great apport developing and sharing this tool.

1 Like
4

Hi Good, I’ve got this sizes inspecting list items with different contents:

iOS
Divider: 31
Title: 44
Title + subtitle: 64.55
Title + text (one line): 64.55
Title + subtitle + text (one line): 85.46

md
Divider: 48
Title: 51.62
Title + subtitle: 72.53
Title + text (one line): 71.62
Title + subtitle + text (one line): 92.53

5

Did you read this article Virtual List с элементами с заранее неизвестной высотой ?