Infinite scroll on ListView?


#1

Hi there,
I was looking trough the Docs and found the “loadMoreItems” event in this link: https://docs.nativescript.org/ui/ns-ui-widgets/list-view

The method in my loadMoreItems event is firing before the ListView even renders the Ajax content and right after it loads the method fires twice in a row, without even scrolling.

Is there a way to prevent the event from firing until the ajax is done AND the list scrolled all the way?
Is there any other event that fires when the user gets to the bottom of the list?

The code I’m running can be found at https://pastebin.com/p4PqgYDX

Sorry for any grammar or spelling mistakes, English is not my first language.
Thanks in advance =D


#2

It’s upto you how you manage your logic. As you see in the example they use a boolean flag - setting it to false while loading. You may do the same, set the flag back to true when your ajax call is completed.


#3

I did just that.
Notice how, in my code, I have a variable called “carregando” it defaults to true while loading then is set to false when finished.
Even doing this, the event fires right after the load , before I scroll the list.
The real problem comes after it, though. Even if I code a workaround to dismiss the first 2 activations of the function, the event does not fire anymore when I scroll the list. It just fires these 2 times right after the Ajax finishes.


#4

It could be some logical error but I’m not sure. Can you try creating a playground example?


#5

Isn’t it because the elements are asynchronously set? So when the view is initialised, there is not enough items, which fires the loadMoreItems; you can try a similar approach to *ngIf in Angular, meaning that you do not display the ListView until the first X elements are loaded, then you make it appear. If there is enough elements once you add it to the page, the events should not be fired.


#6

I like your idea, gonna try it right now.

If fthuin’s suggestion does not work, I’ll set it up on playground.


#7

Well @fthuin idea didn’t work.
The moment the variable sets to true and show the ListView, the event is fired and does not fire anymore when scrolling.

@manojdcoder I have created a Playground example here: https://play.nativescript.org/?template=play-vue&id=MonjY4

Any ideas are wellcome


#8

This works as expected https://play.nativescript.org/?template=play-vue&id=JBcxrB for what I tried


#9

Thank you @fthuin

@biellz1221 Please checkout his code (I didn’t find time yet), let me know if you still face any issues.


#10

@manojdcoder @fthuin

This worked beautifully. Thank you very much =D