High level component for virtual list where each item height is not known before render
| Prop | Type | Required/Default | Description |
|---|---|---|---|
| totalHeight | Number | ✓ | Container height (px): used to calculate the # of components rendered |
| defaultHeight | Number | ✓ | Item expected height (px). Set to your item's minimum height |
| extraItems | Number | 1 | Extra items rendered (extra items rendered to avoid empty space while scrolling) |
<template>
<VueAutoVirtualScrollList
:totalHeight="800"
:defaultHeight="80"
style="width: 100%;"
>
<div
v-for="item in items"
:style="{ height: `${item.height}px` }"
>
{{ item.name }}
</div>
</VueAutoVirtualScrollList>
</template>
<script>
import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'
export default {
...
components: { VueAutoVirtualScrollList },
...
}
</script>import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'
export default {
...
render(h) {
return (
<VueAutoVirtualScrollList
totalHeight={800}
defaultHeight={80}
>
{items.map((item) => (
<div style={{ height: `${item.height}px` }}>
{ item.name }
</div>
))}
</VueAutoVirtualScrollList>
)
},
...
}Scroll to the item at index.
This method is not yet stable or tested.
The number of rendered components is calculated by accumulating each item height to see how many fit in
totalHeight. Each item height is assumed to be defaultHeight, until it is actually rendered.
When that happens the correct value is cached and used for later calculations
The worst case scenario for lists is when each item has multi-line text mixed with other content, which make it very hard to know the component height before render happens. This component makes it easy to use this kind of list without further problems
- Support for infinite scroll
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent