Virtual Scroller loads 9x as much as is visible at any one time.

[miquels]

What happened?

I've built a 'ThumbWall' component. It shows movie posters. Each row is 8 movie posters. The screen can show a maximum of 3 rows, so 24 posters on the screen. But QVirtuaScroll insists on loading 30 rows, that's 240 images. The documentation states:

The number of items that will be rendered will be calculated based on the virtual-scroll-item-size prop and the size of the scrollable area, but you can fit it to your needs using the virtual-scroll-slice-size prop.

Hoever, the component does not seem to calculate this correctly and appears to ignore the virtual-scroll-slice-size prop.

What did you expect to happen?

I expected the VirtualScroll component to preload maybe 3 rows or so (a screenful), and for it to obey the virtual-scroll-slice-size prop.

Reproduction URL

https://codepen.io/miquels/pen/GRMPpLg?editors=1111

How to reproduce?

1. Go to the provided production link.
2. See that the virtual-scroll-slice-size prop is set to 5
3. Notice that the number of rows in the DOM is 30

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[pdanpdan]

The computation is a bit more complicated:

• the base (on screen) minimum number of rows is 10
• then we use virtualScrollSliceRatioBefore and virtualScrollSliceRatioAfter to add more rows before of after

So you can reduce the number of rows by setting these props to a smaller ratio (like 0.2)
https://codepen.io/pdanpdan/pen/zYEeqwY?editors=1111
About the minimum base size I have to think, so please be patient

[rstoenescu]

Fix will be available in Quasar v2.4.11 and v1.17.6