javascript - Ionic 2 滚动性能问题

Question

关于 Ionic2 和 Angular2 的博客和评论给我留下了深刻的印象。我开始在 Ionic 2 中编写应用程序，发现 Ionic2 滚动性能不适用于 iOS 和 Android 的大量记录。

1. 我有一个很大的项目列表，大多数列表项目都在图片之间
2. 滚动性能对于 10 到 20 个项目来说还不错，但是当涉及到 30 个以上的项目时就非常慢了
3. 经过大量搜索后在 Ionic 中找到虚拟滚动并使用它然后性能略有提高最多 50 个项目但在超过 65 个项目后再次变慢

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

是否有解决此问题的解决方法，或者是否有任何纯 JavaScript 框架解决方案可以毫无问题地显示大型列表？理想情况下，它适用于 Android 和 iOS。

Answer 1

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

尝试使用Ionic2的Virtual Scroll

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

更多信息:Ionic Framework - Virtual Scroll