Question

以下是HI我的观点

<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作为视图添加到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>

Answer 1

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

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

Answer 2

了解如何操作（使用Angular＆amp; 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滚动到底部时获取更多数据（无限滚动）

2 个答案: