NativeScript Angular 2 Получите больше данных при прокрутке вниз (бесконечная прокрутка)

Привет, например, ниже мой взгляд

<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>

Я хочу добавить больше данных, получаемых с сервера, в «kidList», когда прокрутка достигает нижней части экрана в {N} aAngular2. Мне очень сложно создавать макеты и добавлять дочерние элементы в «js», как показано ниже (в KidInformation больше данных).

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

Есть ли способ, который мы можем сделать в My Component, просто добавив дочерний элемент в качестве представления, передав локальные параметры для просмотра, я имею в виду, как показано ниже.

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

и kid-item.html будет выглядеть так

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

nativescript angular2-nativescript
person Upender Devulapally    schedule 27.01.2017    source источник
comment
попробуйте radListView, у него есть опции loadOnDemand и InfinScroll.   -  person Hardik Vaghani    schedule 27.01.2017

Ответы (2)


arrow_upward
3
arrow_downward

Представление списка акций поддерживает то, что вы хотите. Не используйте прокрутку и не добавляйте больше макетов на экран. Это приведет к задержке и другим проблемам. Представление списка повторно использует компоненты представления пользовательского интерфейса, чтобы уменьшить накладные расходы, связанные с растущим размером макета. Вы хотите использовать событие loadMore в представлении списка. https://docs.nativescript.org/cookbook/ui/list-view

Конечно, как указано выше ^^^, бесплатный пакет пользовательского интерфейса от telerik предоставляет RadListView, который также поддерживает бесконечную прокрутку с событием loadMore.

person Brad Martin    schedule 29.01.2017

arrow_upward
3
arrow_downward

Узнайте, как это сделать (используя 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 !!! ");
        } 
 });
 }    
}

scrollv.scrollableHeight обновляется сам по себе. Проверено только на эмуляторе Android. Должен работать на обеих платформах.

person Biggg Jimmm    schedule 23.03.2018
comment
Для ScrollView, Grid (и, возможно, других элементов) вы можете попробовать обернуть это в ngAfterViewInit, как описано здесь: github.com/NativeScript/nativescript-angular/issues/ - person srokatonie; 09.04.2020