NativeScript Angular 2 滚动到底部时获取更多数据（无限滚动）

Question

你好，例如下面是我的观点

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

当滚动到 {N} aAngular2 中的屏幕底部时，我想将从服务器获取的更多数据附加到“kidList”。 我很难构建布局并在 'js' 中添加子元素，如下所示（KidInformation 有更多数据）。

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

有没有一种方法可以在 My Component 中通过将本地参数传递给 view 来添加 child 作为视图，我的意思是像下面这样

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> 

Answer 1

股票列表视图支持您想要的。不要使用滚动视图并向屏幕添加更多布局。这将导致滞后和其他问题。列表视图回收 UI 视图组件以减少布局大小增长的开销。您想在列表视图上使用loadMore 事件。 https://docs.nativescript.org/cookbook/ui/list-view

当然，正如上面的评论 ^^^telerik 的免费 UI 套件提供了 RadListView，它还支持通过 loadMore 事件进行无限滚动。

Answer 2

了解如何做到这一点（使用 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 会自行更新。 仅在安卓模拟器上测试。必须在两个平台上工作。