問(wèn)題描述

用vue做列表頁(yè)面時(shí)發(fā)現(xiàn)一個(gè)問(wèn)題：一條數(shù)據(jù)獨(dú)占一行，一個(gè)屏幕能放十條左右的數(shù)據(jù)，滾動(dòng)條滾動(dòng)到底時(shí)加載新的數(shù)據(jù)。但是數(shù)據(jù)量特別大的時(shí)候，可能是幾萬(wàn)條，那么HTML里就會(huì)存在很多的DOM節(jié)點(diǎn)，這個(gè)時(shí)候我想用空白的p來(lái)替代不在屏幕內(nèi)的數(shù)據(jù)列表，比如說(shuō)只在HTML中只顯示3個(gè)屏幕內(nèi)能放下的數(shù)據(jù)節(jié)點(diǎn)，其余的數(shù)據(jù)用兩個(gè)p來(lái)填充，當(dāng)滾動(dòng)條滾到一個(gè)屏幕的高度時(shí)，替換展示的數(shù)據(jù)（VUE中用一個(gè)數(shù)組控制展示的數(shù)據(jù)），然后再計(jì)算上下兩個(gè)p的高度，求實(shí)現(xiàn)方法。

問(wèn)題解答

我理解題主的思路，是純前端的優(yōu)化，控制頁(yè)面元素的數(shù)量，是有意義的。

并不是所有的場(chǎng)景都適合做分頁(yè)，現(xiàn)在有很多列表是滾動(dòng)加載的，越滾數(shù)據(jù)越多。。

至于實(shí)現(xiàn)，感覺(jué)題主說(shuō)的已經(jīng)比較清晰了。。根據(jù)高度計(jì)算應(yīng)該顯示的行就 ok 了，但我感覺(jué)上下空白的 p 不是很必要

不考慮做個(gè)分頁(yè)什么的嗎？你想這么做的意義是什么呢？

同樓上，這種情況，分頁(yè)的意義完全大于你這樣去寫（segemenfault直接搜Vue分頁(yè)組件，有現(xiàn)成的，不過(guò)不是Vue2.0）。 可能，你是覺(jué)得有數(shù)據(jù)量很小的情況，和多一個(gè)分頁(yè)組件，會(huì)很丑。

你這個(gè)的做法，感覺(jué)就是瞎折騰，工作量大，也不好。用一個(gè)分頁(yè)組件吧！element就有。分頁(yè)組件。實(shí)現(xiàn)效果