前言
在工作中，有時會遇到需要一些不能使用分頁方式來加載列表數據的業務情況，對於此，我們稱這種列表叫做長列表。比如，在一些外匯交易系統中，前端會實時的展示用戶的持倉情況(收益、虧損、手數等)，此時對於用戶的持倉列表一般是不能分頁的。
在高性能渲染十萬條數據(時間分片)一文中，提到了可以使用時間分片的方式來對長列表進行渲染，但這種方式更適用於列表項的DOM結構十分簡單的情況。本文會介紹使用虛擬列表的方式，來同時加載大量數據。
為什么需要使用虛擬列表
在實際的工作中，列表項必然不會僅僅只由一個li標簽組成，必然是由復雜DOM節點組成的。
那么可以想象的是，當列表項數過多並且列表項結構復雜的時候，同時渲染時，會在Recalculate Style和Layout階段消耗大量的時間。
而虛擬列表就是解決這一問題的一種實現。
什么是虛擬列表
虛擬列表其實是按需顯示的一種實現，即只對可見區域進行渲染，對非可見區域中的數據不渲染或部分渲染的技術，從而達到極高的渲染性能。
假設有1萬條記錄需要同時渲染，我們屏幕的可見區域的高度為500px,而列表項的高度為50px，則此時我們在屏幕中最多只能看到10個列表項，那么在首次渲染的時候，我們只需加載10條即可。
說完首次加載，再分析一下當滾動發生時，我們可以通過計算當前滾動值得知此時在屏幕可見區域應該顯示的列表項。
假設滾動發生，滾動條距頂部的位置為150px,則我們可得知在可見區域內的列表項為第4項至`第13項。
實現
虛擬列表的實現，實際上就是在首屏加載的時候，只加載可視區域內需要的列表項，當滾動發生時，動態通過計算獲得可視區域內的列表項，並將非可視區域內存在的列表項刪除。
計算當前可視區域起始數據索引(startIndex)
計算當前可視區域結束數據索引(endIndex)
計算當前可視區域的數據，並渲染到頁面中
計算startIndex對應的數據在整個列表中的偏移位置startOffset並設置到列表上
由於只是對可視區域內的列表項進行渲染，所以為了保持列表容器的高度並可正常的觸發滾動
下面是vue代碼
app.vue
<template>
<div id="app">
<div class="VirtualList" :style="{height: windowH +'px', width:windowW+'px'}">
<VirtualList :listData="data" :itemSize="60"/>
</div>
</div>
</template>
<script>
import VirtualList from "./components/VirtualList.vue";
let d = [];
for (let i = 0; i < 100000; i++) {
d.push({ id: i, value: i });
}
export default {
name: 'app',
data() {
return {
data: d
};
},
computed:{
windowW(){
return document.documentElement.clientWidth
},
windowH(){
return document.documentElement.clientHeight
}
},
components: {
VirtualList
}
};
</script>
<style>
.VirtualList{
display: flex;
justify-content: center;
width: 80%;
height: 90%;
}
#app {
height: 100%;
width: 100%;
}
</style>
VirtualList.vue
<template>
<div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
<span>test {{screenHeight}}</span>
<div class="infinite-list-phantom" :style="{ height: listHeight + 'px' }"></div>
<div class="infinite-list" :style="{ transform: getTransform }">
<div ref="items"
class="infinite-list-item"
v-for="item in visibleData"
:key="item.id"
:style="{ height: itemSize + 'px',lineHeight: itemSize + 'px' }"
>{{ item.value }}</div>
</div>
</div>
</template>
<script>
export default {
name:'VirtualList',
props: {
//所有列表數據
listData:{
type:Array,
default:()=>[]
},
//每項高度
itemSize: {
type: Number,
default:200
}
},
computed:{
//列表總高度
listHeight(){
return this.listData.length * this.itemSize;
},
//可顯示的列表項數
visibleCount(){
return Math.ceil(this.screenHeight / this.itemSize)
},
//偏移量對應的style
getTransform(){
return `translate3d(0,${this.startOffset}px,0)`;
},
//獲取真實顯示列表數據
visibleData(){
return this.listData.slice(this.start, Math.min(this.end,this.listData.length));
}
},
mounted() {
this.screenHeight = this.$el.clientHeight;
this.start = 0;
this.end = this.start + this.visibleCount;
console.log("listData",this.listData)
console.log("listHeight",this.listHeight)
},
data() {
return {
//可視區域高度
screenHeight:0,
//偏移量
startOffset:0,
//起始索引
start:0,
//結束索引
end:null,
};
},
methods: {
scrollEvent() {
//當前滾動位置
let scrollTop = this.$refs.list.scrollTop;
//此時的開始索引
this.start = Math.floor(scrollTop / this.itemSize);
//此時的結束索引
this.end = this.start + this.visibleCount;
//此時的偏移量
this.startOffset = scrollTop - (scrollTop % this.itemSize);
}
}
};
</script>
<style scoped>
.infinite-list-container {
height: 100%;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
}
.infinite-list-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index:1;
}
.infinite-list {
left: 0;
right: 0;
top: 0;
position: absolute;
text-align: center;
}
.infinite-list-item {
padding: 10px;
color: #555;
box-sizing: border-box;
border-bottom: 1px solid #999;
}
</style>