Server side paged data and Infinite Scroll 0.17



  • I am trying to provide an “infinite scroll” experience for user submission results (fill a search form, then get results), but have yet to fully implement a suitable version. My goal is to only fetch what I need and minimize the amount of requests and data sent back to the client.

    My first option was with the InfiniteScroll component, however this seemed to be more tedious than expected, as the handler fires immediately on render, and so I had to call stop(), reset(), resume() depending on what point the the user was at. Also I ran into a problem with multiple async calls and had to mitigate and cancel the axios requests so they the results from the request would not trample on the most recent request. So, I got this working, but seems like a hack and still not 100% working as expected.

    My second option was to use the v-scroll-fire inside a scroll area, however, this seems only to fire once, and can not be reset after the next set of data is loaded (correct me if I am wrong)

    If all else fails, I can use a scroll area and a manual “load more” button (possibly with addition JS to trigger when in view) or just switch to normal Pagination.

    Anyone else got a infinite scroll solution with dynamically loaded, paged data?



  • One possible solution to InfiniteScroll is to hide the component until you have your first page of data. This way the handler is not fired. then do a scroll.resume()

    It would be nice if there was an ‘immediate’ prop, so that you can control on the component whether you want it to fire immediately, or on data change or just programmatically after render.



  • @steve A little more complex than I thought. Something like this ?
    https://codepen.io/turigeza/pen/qwZJBR

    For some reason timeout was needed.



  • Very nice @turigeza . Very close to what I did, although I am using 0.17. It is nice to see they have a ‘disable’ prop now!
    I’ll update my title with 0.17


Log in to reply