search

rocwang / vue-virtual-scroll-grid

A Vue 3 component that can render a list with 1000+ items as a grid in a performant way.
https://grid.kiwiberry.nz/
MIT License
300 stars 31 forks source link

Is it possible to use this component without knowing the total number of items in advance? #216

Closed haoxi911 closed 2 years ago

haoxi911 commented 2 years ago

Is your feature request related to a problem? Please describe. I am trying to use your library to load and display pictures inside a folder, unlike a database query, I am not able to tell how many pictures in a folder unless scans through it (which could be slow). I am looking for a way to use your library that I can incrementally add N items at a time, without telling the total number in advance.

Describe the solution you'd like Probably allowing me to access the items array inside your component, or maybe expose it as a property so that I can bind it with my own array?

Describe alternatives you've considered Currently, I am updating both the length and pageSize to the total number of items found, but this is very slow as I need to update these props hundreds of times.

Additional context I guess I probably need to fork your code and make some changes to fit my needs, any guidance would be very helpful and will save my time. Thank you for your help.

rocwang commented 2 years ago

vue-virtual-scroll-grid is designed to support big number of items, but not a unbound collection of items. The number of items need to be known beforehand, as it is required can calculate the total height of container and have a "fixed" scrollbar.

I feel there might be a way to "streaming" the new items in when you scroll to be bottom of page (or close to the bottom). However that would feel like a traditional "infinite scroll" experience which might not be what you want?

I couldn't imagine what the UX of vue-virtual-scroll-grid would be like with the "streaming" approach. Do you have a concrete example somewhere which can demonstrate your feature request? e.g. maybe there is another Vue / React component that supports the behaviour you are after?

haoxi911 commented 2 years ago

You're correct, I am not looking for an "infinite scrolling" component. Honestly, since the total height of the container is calculated based on the number of items, so I am thinking that the scroll height can be recalculated based on the new total number of items. This will also be helpful for those who wants to allow items deletion.