巨大列表中的 NativeScript virtualScroll
NativeScript virtualScroll in huge list
之前我在跨平台应用程序中使用 Ionic。使用 Angular repeat 时,大型列表中存在性能和内存问题。
但是 ionic 有一个叫做 virtualRepeat
的特性(或 v1.x 中的 collection-repeat
)。但是BUG很多,不能用
NativeScript有这样的功能吗? (它不能让所有元素都在列表中保持活动状态,并且随着用户滚动更改列表。)React Native.
中提供了相同的功能。
我还拍了个截图视频做性能演示。起初我有 20 件物品。然后为了在滚动中加载更多,我加载了一个非常大的列表。然后,查看结果:
在 Nativescript 中,您将希望使用 ListView 而不是 ngFor 或其他重复技术,Listview 重用视图并减少大列表的内存使用
示例
<ListView [items]="myItems">
<template let-item="item">
<StackLayout>
<Label [text]='item.name'></Label>
</StackLayout>
</template>
</ListView>
Link 与 docs/more 示例:
最后我发现,它使用了虚拟化。我 运行 这个命令:
tns debug android
然后我可以从 chrome 开发工具中看到元素:
它只使用了几个元素,滚动时会改变它们。
之前我在跨平台应用程序中使用 Ionic。使用 Angular repeat 时,大型列表中存在性能和内存问题。
但是 ionic 有一个叫做 virtualRepeat
的特性(或 v1.x 中的 collection-repeat
)。但是BUG很多,不能用
NativeScript有这样的功能吗? (它不能让所有元素都在列表中保持活动状态,并且随着用户滚动更改列表。)React Native.
中提供了相同的功能。我还拍了个截图视频做性能演示。起初我有 20 件物品。然后为了在滚动中加载更多,我加载了一个非常大的列表。然后,查看结果:
在 Nativescript 中,您将希望使用 ListView 而不是 ngFor 或其他重复技术,Listview 重用视图并减少大列表的内存使用
示例
<ListView [items]="myItems"> <template let-item="item"> <StackLayout> <Label [text]='item.name'></Label> </StackLayout> </template> </ListView>
Link 与 docs/more 示例:
最后我发现,它使用了虚拟化。我 运行 这个命令:
tns debug android
然后我可以从 chrome 开发工具中看到元素:
它只使用了几个元素,滚动时会改变它们。