前言

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

場景模擬:用戶發(fā)起一個(gè)請求,后臺發(fā)送了10w條數(shù)據(jù)

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

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

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

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

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

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

設(shè)置列表初始值

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

建立列表視圖模型

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

監(jiān)聽頁面滾動

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

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

這是列表視圖模型

這是列表

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

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

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

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

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

<div ref="listWrap" class="list-wrap" @scroll="scrollListener">
    <div class="list" ref="List">
        <slot  v-for="item in showList" :songInfo="item" :key="item.id"></slot>
    </div>
  </div>

  setup(props) {
    const list = ref(props.list); //長列表數(shù)據(jù)
    const itemHeight = ref(props.itemHeight); //item高度
    const showNum = ref(props.showNum); //展示的數(shù)據(jù)
    const start = ref(props.start); //滾動過程中的開始索引
    const end = ref(props.end); //滾動過程中的結(jié)束索引
    const listWrap = ref(null); //獲取列表視圖模型節(jié)點(diǎn)
    const List = ref(null)//獲取列表節(jié)點(diǎn)
    onMounted(() => {
        listWrap.value.style.height = itemHeight.value * showNum.value + "px";//設(shè)置列表視圖模型的高度
    });
    const showList = computed(() => {
      //獲取展示的列表
      return list.value.slice(start.value, end.value);
    });

    const scrollListener = (() => {
           //獲取滾動高度
            let scrollTop = listWrap.value.scrollTop;
            //開始的數(shù)組索引
            start.value = Math.floor(scrollTop / itemHeight.value);
            //結(jié)束索引
            end.value = start.value + showNum.value;
            List.value.style.transform =  `translateY(${start.value * itemHeight.value}px)`//對列表項(xiàng)進(jìn)行偏移
    })
    return {
      ...
    };
  },

效果:

節(jié)點(diǎn)變化

可以看到不論列表如何變化,列表dom的數(shù)量并沒有新增

總結(jié) 

到此這篇關(guān)于vue長列表優(yōu)化之虛擬列表實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue虛擬列表實(shí)現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論