javascript - Wie löse ich das Problem zu vieler Listendaten mit der leeren DIV-Füllmethode?

Question

Ich habe beim Erstellen einer Listenseite mit Vue ein Problem festgestellt: Ein Datenelement belegt eine Zeile, ein Bildschirm kann etwa zehn Datenelemente enthalten und neue Daten werden geladen, wenn die Bildlaufleiste bis zum Ende scrollt. Aber wenn die Datenmenge besonders groß ist, vielleicht Zehntausende, dann gibt es viele DOM-Knoten im HTML. Zu diesem Zeitpunkt möchte ich ein leeres p verwenden, um die Datenliste zu ersetzen, die nicht auf dem Bildschirm angezeigt wird . Zeigen Sie beispielsweise nur 3 Datenknoten an, die auf dem Bildschirm platziert werden können, und füllen Sie die verbleibenden Daten mit zwei ps aus. Wenn die Bildlaufleiste auf die Höhe eines Bildschirms scrollt, werden die angezeigten Daten ersetzt. In VUE wird ein Array zur Steuerung der angezeigten Daten verwendet und dann berechnet. Finden Sie die Implementierungsmethode für die Höhe des oberen und unteren p.

Answer 1

我理解题主的思路，是纯前端的优化，控制页面元素的数量，是有意义的。

并不是所有的场景都适合做分页，现在有很多列表是滚动加载的，越滚数据越多。。

至于实现，感觉题主说的已经比较清晰了。。根据高度计算应该显示的行就 ok 了，但我感觉上下空白的 p 不是很必要

Answer 2

不考虑做个分页什么的吗？你想这么做的意义是什么呢？

Answer 3

同楼上，这种情况，分页的意义完全大于你这样去写（segemenfault直接搜Vue分页组件，有现成的，不过不是Vue2.0）。 可能，你是觉得有数据量很小的情况，和多一个分页组件，会很丑。

Answer 4

你这个的做法，感觉就是瞎折腾，工作量大，也不好。用一个分页组件吧！element就有。分页组件。实现效果