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' 中添加 child，如下所示（KidInformation 有更多数据）。

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

有没有一种方法可以在我的组件中通过将本地参数传递给视图来添加 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 会自行更新。仅在 android 模拟器上测试。必须在两个平台上工作。

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

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

nativescript

angular2-nativescript