CODEWITHSUNDEEP
angularnativescriptangular2-nativescriptnativescript-angular
Daniel
Daniel

Reputation: 1033

Nativescript + Angular ScrollView scroll to the end listener

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.

Upvotes: 4

Views: 1828

Answers (2)

Timo Schuck
Timo Schuck

Reputation: 324

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 !!! ");
        } 
 });

Upvotes: 2

Manoj
Manoj

Reputation: 21898

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

Upvotes: 5

Related Questions