AngularJS：具有不同高度的行的虚拟重复

Question

我正在使用离子和AngularJS（AngularJS材料）构建混合应用程序。此应用程序还具有使用Node.js和socket.io构建的集成聊天。

我现在遇到的问题是，只有200条消息，应用程序加载所有消息的速度非常慢（在浏览器中为200毫秒 - 在应用程序中为＆gt; 4秒，即使使用CrossWalk，也有使用track.id跟踪）并且还要输入插入消息的textarea减慢了。

我有两个解决方案可以解决这个问题：

1. 虚拟重复（md-virtual-repeat）
2. 无限滚动（离子无限滚动）

1）我认为虚拟重复将是最好的解决方案（我已经在另一个页面上实现了它并且它像魅力一样滚动1500个项目）但问题是消息可以根据它们的长度和md具有不同的高度 - 虚拟重复要求是所有元素必须具有相同的高度才能工作。

2）所以也许我们可以转向Infinite Scroll方法，但现在的问题是使用ion-infinite-scroll指令做这件事有点棘手，因为聊天需要在到达顶部时触发loadMore（）不是底部。

所以我的问题是：是否有人使用或可以处理不同高度的虚拟重复指令或在顶部工作的无限滚动？

Answer 1

你可以尝试加速它的一些事情。

一种方法是使用类似快速重复的东西：https://github.com/allaud/quick-ng-repeat而不是内置角度js ng-repeat

另一种方法是尽可能使用one time binding来阻止角度在每个摘要周期中不断寻找变化：https://docs.angularjs.org/guide/expression#one-time-binding

当然，如果可能的话，尝试使用chrome的开发人员工具配置文件选项来找出哪些功能正在减慢应用程序的速度; ）

PS：可能值得查看此主题以了解如何实现反向无限滚动：Implementing a reverse infinite scroll using ngInfiniteScroll directive in AngularJS

Answer 2

md-virtual-repeat或collection-repeat等高效滚动列表需要知道每个项目的高度才能发挥作用。那是因为他们需要知道滚动位置，例如显示滚动条或能够跳过帧以快速向下滑动。滚动位置本身只有在你知道滚动了多少（我们需要上面元素的高度）和滚动剩余多少时才能找到（我们需要下面元素的高度）。

您可以做的是使用工厂在将每个元素注入循环之前计算每个元素的高度。这可以通过创建一个与目标容器具有相同属性的容器（例如CSS类），附加新加载的元素，计算它们的高度（使用element.offsetHeight），然后移除容器来完成。

请注意，这很重，可能会导致小幅滞后。

Answer 3

您是否已将React.js视为解决方案？它使用虚拟DOM，使更新长列表更有效。

GitHub上有一个开源仓库，它混合了Angular和React，称为ngReact。

概述： http://ngreact.github.io/ngReact/

文档： http://ngreact.github.io/ngReact/docs/ngReact.html

回购： https://github.com/ngReact/ngReact

希望这有帮助。

Answer 4

使用像铆钉这样的单独粘合剂可能是一个很好的解决方案，它易于集成并且具有rv-each循环

Answer 5

我认为离子指令collection-repeat可能正是您所寻找的。

  

collection-repeat允许应用程序显示更多的项目列表   比ng-repeat表现得更好。它只在DOM中呈现给DOM   目前可见的项目。这意味着在手机屏幕上   可以容纳八个项目，只有八个项目匹配当前滚动   将呈现位置。

Answer 6

查看 angular-vs-repeat angular-vs-repeat

演示：demo

我使用线长来计算物品的计算高度。

这是非常近似的方法。在我们的应用程序中，我们知道，一个字体大小为15px的英文字符的宽度约为6.7px（如果使用等宽字体，那很好，但不是我们的情况）。此外，我们始终知道每个段的宽度和一个文本行的高度。 itemHeight = commulativeTextLenght / lineWidth + paddingsOfItem; 换行符也会影响您的计算。一般来说，我们有一个不错的方法来计算大约8000个文本段落的高度。