Infinite scroll with Xano backend pagination

Hi WeWeb!

Question 1:
I want to have infinite scroll feature when new items loaded when I scroll to the end of the page, not by clicking on button.
Is it possible to do it with WeWeb?

Question 2:

Loading more items with backend pagination.

When I try method to change “Nr of items per page” to add more items to ItemsNumber variable changed (3,6,9…) it refetches whole list (all items) again and takes time. I want it to be like keeping old 3 items & add new 3 only…

Looks like I have to keep “page 1 with 3 items” + fetch "page 2 with 3 items). I cannot understand how to separate and implement these 2 things with 1 Fetched collection on page…

1 Like

I’m interested in the answers to this question too.

Hi @Anna.fae :wave:

Great questions!

Question 1: nope, that won’t be possible

Question 2: you might need to create a load more button to achieve this instead of the Paginator element.

Please bear in mind that the article I linked to is part of the frontend pagination article so specific examples may need to be adapted to backend pagination.

Let me know if that helps!

If not, I’ll add the need for a tutorial on this in my backlog :slight_smile:

1 Like

Hey there :wave:

For potential future readers of this post: it is now possible to setup an infinite scroll in WeWeb without writing a line of code.

6 Likes

Hey @Joyce , great tutorial! I’m wondering if there’s a way to infinite scroll back end items for a dropdown? Right now I see an infinite scroll option but it only works for front end :blush:

Thanks for posting this, super helpfull! I got everything working then I added absolute positioning to my header and the yposition is no longer registering. I changed my logic to using a loader component Y position as in the video, but because the overall workflow is trigger by a scroll nothing happens.