离子2滚动性能问题

Question

关于ionic2和Angular2的博客和评论给我留下了深刻的印象,我开始在离子2中编写一个应用程序,并发现ionic2滚动性能不适合iOS和Android的大量记录.

1. 我在大多数列表项中的图像之间有一个很大的项目列表
2. 滚动性能适用于10到20个项目,但它涉及30多个项目时非常慢
3. 经过大量搜索后发现虚拟滚动离子并使用它然后性能略有改善,最多50项,但在65项以上后再次减速

我在iOS中尝试过WKWebview,在性能方面有一些改进,但是对于大型列表,屏幕常常变为黑色,所以我放弃了这个想法.由于应用程序的大小增加,我不想使用人行横道,所以从未尝试过.

任何人都可以帮助建议任何解决方法来解决此问题或任何纯JavaScript框架解决方案,以显示没有任何问题的大型列表？适用于Android和ios.

Answer 1

滚动是与移动应用程序最常见的交互之一，感觉正确非常重要。本机应用程序具有平滑滚动的列表，它们对触摸和方向变化做出响应，它们以感觉自然的方式加速和减速。

尝试使用 Ionic2 的 Virtual Scroll

虚拟滚动解决了这个问题。在 Ionic 1 中，这称为 Collection Repeat，在 Ionic 2 中，这称为 Virtual Scroll，但这是一个在 HTML5 移动开发中广泛使用的概念。基本思想是，我们只在 DOM 中创建足够的元素来显示当前屏幕上的列表数据，然后回收这些 DOM 元素以在滚动到屏幕外时显示新数据。

更多信息：Ionic 框架 - 虚拟滚动