背景
? 在項目中有一個sku表（是一個尺碼和顏色乘積的表格），假如有10個顏色铐料，20個尺碼，那這個sku表就會有200行阳液。有一個客戶有100個顏色的需求，100個顏色的時候如果有5個尺碼揣炕，就會有500行帘皿，這樣會使頁面很卡，于是找到了vue-virtual-scroll-list這個插件畸陡。
用法
<template>
<div>
<virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable
:data-key="'id'"
:data-sources="items"
:data-component="itemComponent"
/>
</div>
</template>
<script>
import Item from './Item'
import VirtualList from 'vue-virtual-scroll-list'
function createData(len) {
const arr = []
for (let index = 0; index < len; index++) {
const obj = { id: index, text: Math.random() }
arr.push(obj)
}
return arr
}
export default {
name: 'root',
data () {
return {
itemComponent: Item,
items: createData(200)
}
},
components: { 'virtual-list': VirtualList }
}
</script>
// item
<template>
<div>每一行的內(nèi)容</div>
</template>
<script>
export default {
name: 'item-component',
props: {
index: { // 每一行的索引
type: Number
},
source: { // 每一行的內(nèi)容
type: Object,
default () {
return {}
}
}
}
}
</script>
參數(shù)
| Prop | Type | Description |
|---|---|---|
data-key |
String|Function | 從data-sources每個數(shù)據(jù)對象中獲取唯一鍵鹰溜。或每個函數(shù)都調(diào)用data-source并返回其唯一鍵丁恭。在中曹动，其值必須唯一data-sources，用于標識商品尺寸牲览。 |
data-sources |
Array[Object] | 列表數(shù)據(jù)仁期，每一行都必須有一個唯一的id(data-key) |
data-component |
Component | 每一行的子組件 |
keeps |
Number | 默認30個，默認渲染的個數(shù) |
extra-props |
Object | 默認{} data-component組件的額外props通過改屬性傳入,內(nèi)部已有source和index兩個 |
estimate-size |
Number | 默認50竭恬，每一行的高度，如果接近平均大小熬的，則滾動條長度看起來會更準確痊硕。 |
scroll |
事件 | 滾動時發(fā)出param (event, range)。 |
剩下的參數(shù) https://www.npmjs.com/package/vue-virtual-scroll-list
官網(wǎng)地址 https://tangbc.github.io/vue-virtual-scroll-list/#/
原理
vue-virtual-scroll-list.png
如上圖押框，他只渲染keeps傳入的個數(shù)岔绸，滾動時通過改變padding的值來模擬滾動，里面的每一個item在滾動時動態(tài)替換里面的值
核心源碼如下
vue-virtual-scroll-list原理.png
永遠之渲染props的keeps傳入的個數(shù)橡伞，所以這樣不會卡
