javascript - 怎么用空白DIV填充的方法解決列表數(shù)據(jù)過多的問題?
問題描述
用vue做列表頁面時(shí)發(fā)現(xiàn)一個(gè)問題:一條數(shù)據(jù)獨(dú)占一行,一個(gè)屏幕能放十條左右的數(shù)據(jù),滾動(dòng)條滾動(dòng)到底時(shí)加載新的數(shù)據(jù)。但是數(shù)據(jù)量特別大的時(shí)候,可能是幾萬條,那么HTML里就會(huì)存在很多的DOM節(jié)點(diǎn),這個(gè)時(shí)候我想用空白的p來替代不在屏幕內(nèi)的數(shù)據(jù)列表,比如說只在HTML中只顯示3個(gè)屏幕內(nèi)能放下的數(shù)據(jù)節(jié)點(diǎn),其余的數(shù)據(jù)用兩個(gè)p來填充,當(dāng)滾動(dòng)條滾到一個(gè)屏幕的高度時(shí),替換展示的數(shù)據(jù)(VUE中用一個(gè)數(shù)組控制展示的數(shù)據(jù)),然后再計(jì)算上下兩個(gè)p的高度,求實(shí)現(xiàn)方法。
問題解答
回答1:我理解題主的思路,是純前端的優(yōu)化,控制頁面元素的數(shù)量,是有意義的。
并不是所有的場景都適合做分頁,現(xiàn)在有很多列表是滾動(dòng)加載的,越滾數(shù)據(jù)越多。。
至于實(shí)現(xiàn),感覺題主說的已經(jīng)比較清晰了。。根據(jù)高度計(jì)算應(yīng)該顯示的行就 ok 了,但我感覺上下空白的 p 不是很必要
回答2:不考慮做個(gè)分頁什么的嗎?你想這么做的意義是什么呢?
回答3:同樓上,這種情況,分頁的意義完全大于你這樣去寫(segemenfault直接搜Vue分頁組件,有現(xiàn)成的,不過不是Vue2.0)。 可能,你是覺得有數(shù)據(jù)量很小的情況,和多一個(gè)分頁組件,會(huì)很丑。
回答4:你這個(gè)的做法,感覺就是瞎折騰,工作量大,也不好。用一個(gè)分頁組件吧!element就有。分頁組件。實(shí)現(xiàn)效果

相關(guān)文章:
1. nignx - docker內(nèi)nginx 80端口被占用2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. 關(guān)于docker下的nginx壓力測試4. docker - 各位電腦上有多少個(gè)容器???容器一多,自己都搞混了,咋辦呢?5. mac里的docker如何命令行開啟呢?6. docker容器呢SSH為什么連不通呢?7. docker start -a dockername 老是卡住,什么情況?8. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件9. docker gitlab 如何git clone?10. macos - mac下docker如何設(shè)置代理

網(wǎng)公網(wǎng)安備