NativeScript RadListView: Infinite scroll to top?


#1

I’m using the latest nativescript (3.1.1) and RadListView. I’m trying to achieve infinite scrolling when the user scrolls up the list (similar to how Facebook Messenger, Whatsapp and other chat apps work).

I know loadOnDemand works great but it works only when the user scrolls down. Is there a way to make loadOnDemand work when the user scrolls up? Or any other workaround?

Many thanks!
Shay.


#2

@ironshay - does the Pull-to-Refresh feature not meet this requirement? - http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/pull-to-refresh


#3

No, because the user will have to pull the list down to get more items. It is not the way infinite scrolling should be working.


#4

@ironshay - in that case you can log this as a feature request here: https://github.com/telerik/nativescript-ui-feedback and we may consider it for a future release.


#5

Is there some sample code you might have that can help me achieve that in the meanwhile until you add this feature?


#6

@ironshay - actually I think you might easily achieve this using the scrolling events exposed by RadListView: http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/scrolling

You can use the scrolled in particular: http://docs.telerik.com/devtools/nativescript-ui/api/classes/radlistview.html#scrolledevent

This event exposes the current scroll offset of the list. Once it becomes 0 or negative you can start a data-fetch process, raise a flag that a process is undergoing and reset it once the data has arrived.

How do you feel about this?


#7

I ended up doing something similar to what you’ve suggested. It wasn’t as easy as it seems but it seems to be working at the moment. Thanks!


#8

@ironshay - it will be great if you share your solution here for the others who might need to implement this behavior. Thanks! :slight_smile:


#9

The solution turned out quite complicated and still doesn’t work perfect so I can’t post the solution yet. I’ll try to create a sample repo with the solution and post it here soon.