Ionic 3 中的 Virtual VS Infinite 滚动有什么区别和用例 [英] What are differences and use cases for Virtual VS Infinite scroll in Ionic 3

问题描述

我浏览了 Ionic 3 文档，并试图了解两者之间的区别

在这里你可以看到虚拟滚动的例子

无限滚动

• 当您获取一定数量的记录并将它们插入到列表中时，一旦您到达底部，它就会获取下一批并将它们插入到列表中，并且只要您有要获取的项目就重复该操作.
• 这里有比 Virtual Scroll 更多的 Instance Members.这意味着您可以更好地控制该组件.

这是一个无限滚动的例子

参考: 链接 1 和 链接2

I've gone through Ionic 3 docs and I was trying to understand the difference between

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

and

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

I see they use different components and while they show an example of InfiniteScroll there is no example of VirtualScroll and it's set up also looks trickier.

What is difference between the two and what are possible use cases when to use one or the other?

解决方案

Virtual Scroll

• We only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off the screen.
• This is done to improve performance when dealing with long lists.
• Example: you select 500 records to be displayed in a list, But Virtual Scroll will only insert a percentage of them into the DOM at a time which makes scrolling more fluid.

This diagram should help explain the concept: (by courtesy of josh article below)

Here you can see the example of Virtual Scroll

Infinite Scroll

• When you fetch a set number of records and insert them into a list, once you reach the bottom it'll fetch the next batch and insert them into the list and repeat that as long as you have items to fetch.
• Here you have more Instance Members than the Virtual Scroll. That means you have more control of this component.

Here is an example of Infinite Scroll

Refernces: Link 1 and Link 2

这篇关于Ionic 3 中的 Virtual VS Infinite 滚动有什么区别和用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！