javascript - AngularJS:不同高度的行的虚拟重复

Question

我正在使用 ionic 和 AngularJS(AngularJS-material)构建一个混合应用程序。该应用程序还具有使用 Node.js 和 socket.io 构建的集成聊天功能。

我现在遇到的问题是，只有 200 条消息，应用程序加载所有消息的速度非常慢(浏览器中为 200 毫秒 -> 应用程序中为 4 秒，即使使用 CrossWalk 并通过 message.id 进行跟踪)，并且还键入插入消息的文本区域速度变慢。

我有两个解决方案来解决这个问题:

1. 虚拟重复 (md-virtual-repeat)
2. 无限滚动(ion-infinite-scroll)

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

2) 因此，也许我们可以转向无限滚动方法，但现在的问题是，使用 ion-infinite-scroll 指令执行此操作会有点棘手，因为聊天需要在到达顶部时触发 loadMore() ，并且不是底部。

所以我的问题是:是否有人有一种解决方法，可以使用可以处理不同高度的虚拟重复指令或在聊天中实现平滑/快速的 ng-repeat 或>在顶部工作的无限滚动？

Answer 1

像md-virtual-repeat或collection-repeat这样的高效滚动列表需要知道每个项目的高度才能工作。那是因为他们需要知道滚动位置，例如显示滚动条或能够跳过帧以进行快速向下滑动 Action 。只有当您知道已经滚动了多少(我们需要上面元素的高度)和剩余滚动量(我们需要下面元素的高度)时，才能找到滚动位置本身。

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

请注意，这非常重，并且可能会导致小的滞后峰值。