NativeScript Angular 2 Get more data when Scroll to Bottom (endless scrolling)

Question

HI for example below is my view

<ScrollView>
    <StackLayout>
        <StackLayout *ngFor="let kid of kids" id="kidList">
            <StackLayout orientation="horizontal" class="some-class">
                <Lable text="{{ kid.fname }} {{ kid.lname }}"></Lable>
                <Lable text="{{ kid.age }} years ago"></Lable>
            </StackLayout> 
        </StackLayout>
    </StackLayout>
</ScrollView>

I want to append the more data getting from server to 'kidList' when scroll reaches to bottom of screen in {N} aAngular2. It's very hard to me build the layouts and adding childs in 'js' like below(KidInformation has more data).

 let stackLayout = new StackLayout();
 stackLayout.addChild('something newly constructed with JS')

Is there a way we can do in My Component just by adding child as view by passing local parameters to view , I mean like in below way

let kidListStacklayout = view.getViewById(this.page, 'kidList');
kidListStacklayout.addChild('views/kid/kid-item.html')

and kid-item.html will look like

<StackLayout orientation="horizontal" class="some-class">
                    <Lable text="{{ kid.fname }} {{ kid.lname }}"></Lable>
                    <Lable text="{{ kid.age }} years ago"></Lable>
                </StackLayout>

try radListView it has loadOnDemand and infiniteScroll options. — Hardik Vaghani
– Hardik Vaghani, Commented Jan 27, 2017 at 9:33

Brad Martin · Accepted Answer · 2017-01-29 17:08:50Z

3

The stock list view supports what you want. Don't use a scrollview and adding more layouts to the screen. This will cause lag and other issues. A listview recycles UI view components to reduce overhead of the layout growing in size. You want to use the loadMore event on the list view. https://docs.nativescript.org/cookbook/ui/list-view

Of course as the comment above ^^^ the free UI suite from telerik provides the RadListView which also supports infinite scrolling with a loadMore event.

answered Jan 29, 2017 at 17:08

Brad Martin

6,2776 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Biggg Jimmm · Accepted Answer · 2018-03-23 11:39:05Z

3

Find out how to do it ( using Angular & TypeScript) :

import { ScrollView, ScrollEventData } from "ui/scroll-view"; 

@Component({...})
class ComponentClass implements OnInit, AfterViewInit {
@ViewChild("scrollid") scrollView: ElementRef;

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

The scrollv.scrollableHeight gets updated by itself. Tested on android emulator only. Must work on both Plateforms.

answered Mar 23, 2018 at 11:39

Biggg Jimmm

772 silver badges12 bronze badges

1 Comment

srokatonie Over a year ago

For ScrollView, Grid (and possibly other elements), you can try to wrap this in ngAfterViewInit as described here: github.com/NativeScript/nativescript-angular/issues/…

Collectives™ on Stack Overflow

NativeScript Angular 2 Get more data when Scroll to Bottom (endless scrolling)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related