第vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過(guò)程詳解目錄前言實(shí)現(xiàn)原理實(shí)現(xiàn)代碼總結(jié)

前言

應(yīng)用場(chǎng)景:后臺(tái)一次性發(fā)送上千條或更多數(shù)據(jù)給前臺(tái)

場(chǎng)景模擬:用戶(hù)發(fā)起一個(gè)請(qǐng)求,后臺(tái)發(fā)送了10w條數(shù)據(jù)

使用虛擬列表之前:前臺(tái)需要生成10w個(gè)dom節(jié)點(diǎn)用來(lái)渲染頁(yè)面

使用虛擬列表之后:前臺(tái)只需要生成少量dom節(jié)點(diǎn)(dom節(jié)點(diǎn)數(shù)量取決于前端視圖需要展示的數(shù)量),就可以實(shí)現(xiàn)對(duì)這10w條數(shù)據(jù)的視圖渲染

總之:虛擬列表就是固定dom節(jié)點(diǎn)數(shù)量,通過(guò)修改dom節(jié)點(diǎn)的內(nèi)容而達(dá)到不重新增加(或刪除)dom節(jié)點(diǎn)來(lái)實(shí)現(xiàn)列表的更新

實(shí)現(xiàn)原理

監(jiān)聽(tīng)頁(yè)面滾動(dòng),獲取滾動(dòng)的高度scrolltop根據(jù)scrolltop,可以知道當(dāng)前應(yīng)該展示哪一段數(shù)據(jù)(即獲取要展示數(shù)據(jù)的index)根據(jù)當(dāng)前展示的數(shù)據(jù)在長(zhǎng)列表中的index,對(duì)列表進(jìn)行偏移

實(shí)現(xiàn)思路是這樣的:

設(shè)置列表初始值

需要展示給用戶(hù)的數(shù)量showNum列表item的高度itemHeight需要展示的第一條數(shù)據(jù)的下標(biāo)start需要展示的最后一條數(shù)據(jù)的下標(biāo)end通過(guò)start和end已經(jīng)showNum,我們可以得到需要展示的列表項(xiàng)showList,我們可以通過(guò)vue的計(jì)算屬性來(lái)實(shí)時(shí)獲取新的showList

建立列表視圖模型

給列表視圖設(shè)置高度ListWrapHeight根據(jù)itemHeight和showNum,我們可以得到列表總高度ListHeight,我們必須要使得ListHeight高度大于ListWrapHeight,這樣才能實(shí)現(xiàn)滾動(dòng)

監(jiān)聽(tīng)頁(yè)面滾動(dòng)

給列表視圖模型設(shè)置監(jiān)聽(tīng)函數(shù),每當(dāng)列表視圖發(fā)生滾動(dòng),就執(zhí)行回調(diào),獲取滾動(dòng)高度scrolltop通過(guò)scrolltop和itemHeight我們可以得到新的start以及end,從而獲取到新的showList通過(guò)start和itemHeight我們可以給list設(shè)置偏移(translate),從而達(dá)到讓start對(duì)應(yīng)的數(shù)據(jù)展示在視圖模型的效果

注意:列表視圖模型和列表并不是一個(gè)東西,視圖模型表示者頁(yè)面供列表展示的一塊區(qū)域,而列表表示的是需要展示的列表項(xiàng)總高度

這是列表視圖模型

這是列表

列表中超出視圖模型的節(jié)點(diǎn)就被隱藏了

為什么限制了展示列表項(xiàng)的長(zhǎng)度(限制了dom數(shù)量),視圖模型還能持續(xù)滾動(dòng)？

給列表設(shè)置translate會(huì)增大列表的高度,既然list的高度變大了,那么視圖模型就可以繼續(xù)滾動(dòng)

實(shí)現(xiàn)代碼

?以vue3為例(不管是vue2或是vue3,實(shí)現(xiàn)虛擬列表的核心代碼都是相同的,即監(jiān)聽(tīng)滾動(dòng),賦新值)

divref="listWrap"@scroll="scrollListener"

divref="List"

slotv-for="iteminshowList":songInfo="item":key="item.id"/slot

/div

/div

setup(props){

constlist=ref(props.list);//長(zhǎng)列表數(shù)據(jù)

constitemHeight=ref(props.itemHeight);//item高度

constshowNum=ref(props.showNum);//展示的數(shù)據(jù)

conststart=ref(props.start);//滾動(dòng)過(guò)程中的開(kāi)始索引

constend=ref(props.end);//滾動(dòng)過(guò)程中的結(jié)束索引

constlistWrap=ref(null);//獲取列表視圖模型節(jié)點(diǎn)

constList=ref(null)//獲取列表節(jié)點(diǎn)

onMounted(()={

listWrap.value.style.height=itemHeight.value*showNum.value+"px";//設(shè)置列表視圖模型的高度

constshowList=computed(()={

//獲取展示的列表

returnlist.value.slice(start.value,end.value);

constscrollListener=(()={

//獲取滾動(dòng)高度

letscrollTop=listWrap.value.scrollTop;

//開(kāi)始的數(shù)組索引

start.value=Math.floor(scrollTop/itemHeight.value);

//結(jié)束索引

end.value=start.value+showNum.value;

List.value.style.transform=`translateY(${start.value*i