Virtual list with dynamic elements

1

I am wondering what would be the best way to create a virtual list with dynamic elements of which I don’t know what their height will be until I put them in the DOM. I know that I can set a function to calculate the height of an element, but what would be an efficient way to do that?

2 Likes
2

The best way of course is height function where you need to return element height. But if you don’t know it then it is a bit tricky. Then I suggest logic should be the following: after VL elements inserted you get the DOM element height and save it in some cache object/array, and trigger VL to rerender list, and inside of its height function you return that value from cache

3

This seems to work for the initial items, but as soon as I append more items, the list starts to jump and skips elements. Is this a bug or is the virtual list behaving differently when appending items?

Edit: Seems like its not a problem of the append function, but of long lists. Somewhere around the 15th element the list starts skipping elements, even if I put 20 items in the list at init time.

4

I am facing same problem. But how to trigger vl to rerender list? Will that cause double refresh?

5

Hello, in my case, I have a variable item-text element that may occupy up to 3 lines when rendering. I do not know how to calculate its height, and I don’t like double rendering approach.

6

The height is, still, must be specified. You can just assume that your item-text will have 2 or 3 lines and fix its height. There is no other solution here, height needs to be specified, this is the core idea of VL

7

Thanks Vladimir, I’ll use the height with 1 line in item-text, and apply a style to the item-text element to show just 1 line of text