vue-long-list-load，滿足特殊條件的長列表加載。支持：1、各個節(jié)點高度不同且可自由設定 2、各個節(jié)點可修改不影響加載效果 3、可精確的滾動到指定位置。

背景

有個長列表渲染的需求，本來用vue-virtual-scroll-list的。但是每個節(jié)點的高度不一樣，用著有點問題。如果也有相應的需求可以參考下我的方案。歡迎大家交流！

vue-long-list-load

滿足特殊條件的的長列表加載。 列表內各個節(jié)點高度不一，各個節(jié)點可以進行修改，定位到指定位置指定節(jié)點。 www.npmjs.com/package/vue…

主要內容 vue-long-list-load 與 vue-virtual-scroll-list 對比 vue-long-list-load實現思路 基本代碼 插件使用方式 插件參數說明 一、組件對比

vue-long-list-load ，vue-virtual-scroll-list兩個插件各有優(yōu)缺點，當我們在選擇插件的時候要選擇最適合應用場景的插件。下面是兩個插件的基本功能對比。vue-long-list-load 主要特點是適用于各個節(jié)點尺寸不統(tǒng)一的場景，vue-virtual-scroll-list更適用于高度統(tǒng)一節(jié)點以列表長度以w計的這種列表。

組件 vue-long-list-load vue-virtual-scroll-list npm地址 www.npmjs.com/package/vue… www.npmjs.com/package/vue… 核心 先空dom占位，顯示區(qū)域內組件掛載顯示 計算當前顯示區(qū)域內要顯示的組件掛載 橫向 支持 支持 列表內高度一致 支持 支持 列表內高度不一致 支持 支持不好 滾動到指定組件 支持 高度不一致時計算不準確 滾動事件 支持 支持 組件高度改變事件 支持 支持 隱藏組件 支持 不支持 二、實現思路

主要思想就是通過color{red}{虛擬dom}虛擬dom占位各個節(jié)點，根據可顯示視口的變化來展示該展示的節(jié)點。影響可顯示視口的因素的監(jiān)聽，頁面整體寬高變化、節(jié)點高度變化、頁面的滾動定位到某一個節(jié)點等都可能會影響到視口的變化。當視口發(fā)生變化后計算可顯示的節(jié)點，將可顯示的節(jié)點掛載上節(jié)點的組件，不在視口內的節(jié)點銷毀組件緊保留一個空的div。下圖為實現思路的流程圖。

三、關鍵方法源碼分析

主入口html結構如下，color{red}{v-for}v−for 展示長列表長度的的節(jié)點，并且通過:style 來設置一個color{red}{最小高度}最小高度，設置最小高度的原因是這個高度值可能不準確，當真正組件渲染完之后計算出最準確的高度，如果直接height的話可能會使節(jié)點內的組件展示不全。同時每個節(jié)點設置唯一id（scrollItem_ 唯一標識），在根據數據獲取dom信息時候使用。節(jié)點組件定義了唯一的class （long-item- 唯一標識），主要用來掛載真實列表組件，同時監(jiān)聽組件的高度變化。showList[index]來控制節(jié)點是否時候顯示的唯一標識。

<!--html代碼--> <template> <div : : :key='item[dataKey]' : v-for='(item,index) in dataList' > <long-item v-if='showList[index]':dataKey='dataKey' :item='item':boxHeight='item.height||0':direction='direction':heightChange='heightChange':extendCcomments='extendCcomments'> </long-item> </div> </template>

當showList[index]為true的時候，對應的節(jié)點顯示。long-item 在mounted生命周期時，回調extendCcomments。通過color{red}{Vue.extend Profile}Vue.extendProfile掛載到對應的dom上。componentProps是節(jié)點組件傳過來的一些參數，在掛載的時候全部掛載上。

<!--掛載組件--> extendCcomments(item){ this.componentProps.item=item var Profile = Vue.extend(this.dataComponent);// 創(chuàng)建 Profile 實例，并掛載到一個元素上new Profile({ propsData:this.componentProps} ).$mount(’.long-item-’+item[this.dataKey]); }

通過color{red}{element-resize-detector}element−resize−detector來監(jiān)聽dom尺寸的變化，每個節(jié)點的寬高發(fā)生變化的時候，并且與原來的尺寸不一樣回調heightChange方法，進行尺寸的更新及顯示節(jié)點的操作計算。

<!--每個節(jié)點尺寸發(fā)生變化--> this.$nextTick(()=> { this.$DomListener.listenTo(document.getElementById(’long-item-’+this.item[this.dataKey]), (element)=>{ if(this.boxHeight != element[this.directionConfig.width]){this.heightChange(this.item, element[this.directionConfig.width]) } }) });

獲取可顯示的視口區(qū)域的方法，頁面滾動和尺寸變化都會調用到這個方法，所以這個方法在調用的時候做防抖處理300ms內有連續(xù)調用只會執(zhí)行最后一次調用，要不然會頻繁計算影響性能。可顯示視口區(qū)域計算方式是當前視口 及 前后兩個視口總共三個視口的尺寸。這樣在小的滾動范圍內會有較好的體驗。

getShowLimit(startTop) { const scrollTop = startTop || this.scrollWrap[this.directionConfig.scrollTo] || 0; // 滾動距離 this.viewClientHeight = this.scrollWrap[this.directionConfig.width]; // 可視區(qū)域高度 this.scrollTop = scrollTop this.showStart = scrollTop - this.viewClientHeight this.showEnd = scrollTop + 2*this.viewClientHeight if(this.setTopTimer){ clearTimeout(this.setTopTimer) } this.setTopTimer = setTimeout(() => { this.setItemTopheight() }, 300); },

根據高度或者寬度來計算節(jié)點是否顯示，因為這個計算量比較大避免而且這個方法與其他方法沒有什么關聯(lián)，直接單獨開一個color{red}{獨立線程}獨立線程進行計算。通過引入color{red}{simple-web-worker}simple−web−worker這個插件單獨開一個線程進行計算顯示節(jié)點。計算方法主要有三點：當前節(jié)點的開頭在顯示視口內、當前節(jié)點的結尾在顯示視口內、當前節(jié)點開頭和結尾都不在顯示視口內。分為這三種情況，只要滿足一種情況，則該節(jié)點就顯示在顯示視口中。

// 根據高度計算節(jié)點是否顯示 setItemTopheight(){ let stsartId = this.dataList[0]&&this.dataList[0][this.dataKey] let startDom = stsartId && document.getElementById(’scrollItem_’+stsartId) let startTop = startDom ? startDom[this.directionConfig.offset] : 0 this.worker = this.$worker.run((dataList,showStart,showEnd, startTop,hideIds,dataKey,height) =>{ let topHeight = startTop; // 題目頂部距離頂部距離 let bottomHeight = 0; // 題目底部距離頂部距離 let showList = [] for(let i=0,len=dataList.length;i<len;i++){let item = dataList[i]if(hideIds.indexOf(item[dataKey]) != -1){ showList[i] = false; continue;}bottomHeight = topHeight + (item.height>=0?item.height:height)// 判斷 1.題目頂部在顯示范圍內 2.題目底部在顯示范圍內 3.題目頂部和底部都不在顯示范圍內 if((topHeight>=showStart && topHeight<=showEnd)|| (bottomHeight>=showStart && bottomHeight<=showEnd)|| (topHeight<showStart && bottomHeight>showEnd) ){ showList[i] = true} else{ showList[i] = false} topHeight += ((item.height>=0?item.height:height)); } return showList }, [this.dataList, this.showStart, this.showEnd, startTop, this.hideIds,this.dataKey,this.height]) .then(res => { this.showList = res }) this.worker = null },四、使用方式

安裝vue-long-list-load：

npm install vue-long-list-load --save

項目內調用

<long-list ref='vueLongList' dataKey=’id’ scrollWrap :dataList='dataList' :dataComponent='dataComponent' :componentProps='componentProps' height=100 > </long-list>五、參數說明 參數 說明 類型 必填 可選值 默認值 scrollWrapId 列表滾動容器id string true — — dataKey 節(jié)點數據內唯一鍵值 String true — — dataList 列表數據 Array true 具體見下方說明 — dataComponent 自定義的節(jié)點組件 — true — — ref 調用組件內部方法 string false — — direction 滾動方向 Number false 0:縱向，1橫向 0 hideIds 列表中需要隱藏的節(jié)點 Array false 具體見下方說明 [] height 節(jié)點高度 Number false — 100 componentProps 節(jié)點組件要傳遞的參數 Object false — {} scroll 滾動區(qū)域內滾動回調方法 Function false - — resized 某個節(jié)點寬高發(fā)生變化回調方法 Function false 具體見下方說明

部分參數說明

&lt;--假設 dataKey=id--> &lt;--列表中需要隱藏的節(jié)點--> hideIds:[1, 2] &lt;--列表數據 dataList 內 height 為 **Number**。--> dataList:[ {id:1,height:100}, {id:2,height:200}, {id:3,height:300}, {id:4,height:300}, {id:5,height:300} ] &lt;--節(jié)點高度--> height:100 &lt;--如果dataList的數據內有height值 不需要設置這個height--> &lt;--如果dataList 和 height 都不傳遞的話，默認為100 可能滾動略有卡頓；--> &lt;--建議在每個高度都不相同的時候通過dataList傳遞，都相同時候通過height傳遞--> &lt;--某個節(jié)點寬高發(fā)生變化回調方法 返回參數為id 與高度--> resized(id, height){ }總結

項目中實踐數據，基本每個節(jié)點至少500個dom節(jié)點，平均也在800個dom節(jié)點以上，用vue-long-list-load 不在渲染區(qū)域內的題目只會渲染2個dom節(jié)點。按正常800左右個dom節(jié)點的題目計算 一般渲染區(qū)域渲染的節(jié)點在9個左右，如果是n節(jié)點的列表 ，每次加載 dom操作都減少(n-9)x(800-2)個dom的渲染，如果color{red}{1000個節(jié)點}1000個節(jié)點的列表每次加載和操作的時候相當于減少了color{red}{726180}726180個dom節(jié)點的渲染。首次渲染還有修改后的重繪都大大減少了dom的渲染加快了加載速度提高了用戶體驗。 此方案已經在項目中實踐一段時間，用戶反饋很好。如果大家也有類似的場景需求，歡迎大家使用！交流！

以上就是如何讓vue長列表快速加載的詳細內容，更多關于vue 長列表快速加載的資料請關注好吧啦網其它相關文章！