Virtual-Scroll server side paging



  • The virtual scroll component currently provides the ability to dynamically generate items via the item-fn. I had thought to leverage this to attempt a more traditional paging model for retrieving data from the server. Basically go get items 100-200 as the user scrolls within a threshold.

    I am running into a couple of issues when attempting to use the function to page data:

    • First the itemFn is initially not called until reaching the end of the item slice size. After the initial call it will then call as items are scrolled. Is there a reason that the virtual-scroll component operates in this manner or is this possibly a bug?
    • The only values available from within the itemFn is from and size which are not helpful. I can calculate the current index, but there is no option such as a threshold to control how often it is called. It would be beneficial to have a threshold parameter and page event which supplies a to and from value of what the next page should be based on the slice size specified. The page event would only be called when a new page of data is needed and data returned is appended to the list as the user scrolls. It would also be helpful to know the direction.

    My question is if anyone is using this in a more traditional way and how they are accomplishing it, or is it possible to get this in as a feature request. Any help is appreciated.



  • Could it be, you are looking for features in QInifiniteScroll? https://quasar.dev/vue-components/infinite-scroll

    Scott



  • Sorry for the delay… QInifiniteScroll does not really fit the bill as for mobile rendering of large lists it will react slowly and will require reaching the bottom of a page before more is loaded. What I would like to do is allow a user to scroll halfway down a list of say 20,000 items and have the item-fn called once to load the current page of data based on the bounds of the slice size.
    In the documentation there is an example for using virtual scroll and QTable where when you reach the end of a list it does load more items, but you can only scroll to the end of the current page, whereas the item-fn allows you to scroll anywhere within the length specified (say 100,000 items) and then it will make a call to render the items. This would provide a much better user experience as the concept of paging would not be evident to the user.
    What I find odd is when using the item-fn on a list of 100000 items as in the examples shown is not reliable. If the slice size is set to say 300 items the item-fn call is delayed and is not initially called until the index reaches about halfway through the first range of 300. After the initial item-fn call it then calls on each scroll from that point on. If it was only called once as you scrolled towards the end of the slice size it would possibly allow for a better paging scenario.
    Hopefully this makes sense…


Log in to reply