怎么用空白DIV填充的方法解决列表数据过多的问题？

Question

用vue做列表页面时发现一个问题：一条数据独占一行，一个屏幕能放十条左右的数据，滚动条滚动到底时加载新的数据。但是数据量特别大的时候，可能是几万条，那么HTML里就会存在很多的DOM节点，这个时候我想用空白的DIV来替代不在屏幕内的数据列表，比如说只在HTML中只显示3个屏幕内能放下的数据节点，其余的数据用两个DIV来填充，当滚动条滚到一个屏幕的高度时，替换展示的数据（VUE中用一个数组控制展示的数据），然后再计算上下两个DIV的高度，求实现方法。

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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