vue-virtual-scroller
vue-virtual-scroller copied to clipboard
Support lazyloaded data
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:
numItemsAbove: The number of empty items above the first item in the propertyitemsnumItemsBelow: The number of empty items below the last item in the propertyitemsemptyItem: An item similar to the items initems(without an id) which is used to create the views of empty items
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:
itemSize: null- the size of the empty items is taken from the
minItemSize keyField: "id"
If asked for, I would be very happy to help further developing this feature (also for the latest version of the repo).
Validations
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
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).
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.