angular - Ionic 3 中虚拟 VS 无限滚动的区别和用例

Question

我已经阅读了 Ionic 3 文档，我试图了解它们之间的区别

https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

和

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

我看到他们使用了不同的组件，虽然他们展示了 InfiniteScroll 的示例，但没有 VirtualScroll 的示例，而且它的设置看起来也更棘手。

两者之间有什么区别，使用其中一个的可能用例是什么？

Answer 1

虚拟滚动

• 我们只在 DOM 中创建足够的元素来显示当前屏幕上的列表数据，我们回收这些 DOM 元素以显示新数据，因为它们 滚出屏幕。
• 这样做是为了在处理长列表时提高性能。
• 示例:您选择要在列表中显示的 500 记录，但是 Virtual Scroll 只会插入一个百分比 一次放入 DOM，这使得滚动更加流畅。

这张图应该有助于解释这个概念:(由下面的 josh 文章提供)

在这里你可以看到 example of Virtual Scroll

无限滚动

• 当您获取一定数量的记录并将它们插入列表时，一旦到达底部，它将获取下一批并将它们插入列表并重复此过程，只要您有要获取的项即可。<
• 这里您的Instance Members 比Virtual Scroll 多。这意味着您可以更好地控制此组件。

这是一个 example of Infinite Scroll

引用: Link 1和 Link 2