4

Is there any callback that could be used to identify whenever ScrollView is scrolled to the very bottom? In the Nativescript documentation only the scroll event is mentioned, but it only provides information about the X or Y cords of current scroll. Not sure if this event is helpful for me since my ScrollView height is dynamic.

Daniel
  • 993
  • 2
  • 10
  • 23

2 Answers2

5

You could still listen to scroll event and see whether the current verticalOffset is equal to location of last component in your ScrollView.

Something like,

 // Attached to layoutChange event of your container element inside scroll view
 onLayoutChanged(event: EventData) {
    const containerLyt = <StackLayout>event.object,
        length = containerLyt.getChildrenCount(),
        lastItem = containerLyt.getChildAt(length - 1);

    this.lastItemY = lastItem.getLocationRelativeTo(containerLyt).y;
}

onScroll(event: EventData) {
    const scrollView = <ScrollView>event.object,
        verticalOffset = scrollView.getActualSize().height + scrollView.verticalOffset;

    if (verticalOffset >= this.lastItemY) {
        console.log("Reached end of scroll");
    }
}

Playground Example

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • Thank you. Your answer really helped me to find solution. I'll post it laster. Though what's interesting is that getLocationRelativeTo always returns value slightly smaller than verticalOffset so that it never gets smaller than verticalOffset. The difference is always fixed. I'm wondering if it is connect with the fact that last child in layout has such a hight that can't be displayed full hight on the screen initially. – Daniel Feb 01 '19 at 21:30
  • It was a pseudocode which I didn't actually test, I have updated the answer with working example. – Manoj Feb 01 '19 at 22:01
1

Simply detect the end of the ScrollView by comparing the scrollView.scrollableHeight and the ScrollEventData.scrollY like:

let scrollv : ScrollView = <ScrollView>this.scrollView.nativeElement;
scrollv.on(ScrollView.scrollEvent, function (args: ScrollEventData) { 
        if(scrollv.scrollableHeight === args.scrollY){
            console.log("load more items here !!! ");
        } 
 });
Timo Schuck
  • 314
  • 3
  • 11