Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.69k stars 915 forks source link

Support lazyloaded data #769

Open pbaern opened 2 years ago

pbaern commented 2 years ago

Clear and concise description of the problem

I want to be able to use the virtual scroller with a large number of items without providing a list of all these items. In other words, I want to have the possibility to simulate a larger number of items than the length of the items array given as a property by using "empty" items for the ones which are not provided.

With this it would be possible to lazyly load the data by using the onUpdate event appropriately without having to create a large array containing mostly empty items. In particual, the performance of the scroller would no longer depend on the total number of items.

Suggested solution

E.g., I would suggest the following additional properties:

The size of the empty items could be taken from the itemSize if it is not null and from the size of the emptyItem or the minItemSize if not.

Alternative

No response

Additional context

As a proof of concept I already created a patch starting from version 1.1.2 of the Recycle Scroller which supports these features but only when using the following other parameters:

If asked for, I would be very happy to help further developing this feature (also for the latest version of the repo).

Validations

Akryum commented 1 year ago

I think you can already do this using the befoare and after slot, with a div on which on apply the size you want (for example itemSize * itemCount).

pbaern commented 1 year ago

That was my first approach, too, but it comes with the obstacle that it is then no longer possible to use the update event for loading the correct next part of the data, since it will simply give e.g. startIndex=0 above the loaded columns. It would also be super helpful to be able to display empty rows/rows with a loading animation which can be scrolled virtually just like the loaded rows.