1.0.2 • Published 8 months ago
wang-vue-virtual-list v1.0.2
vue-auto-list
use for vue2
this is for react-auto-list
fixed height
import {VirtualList} from '.'
<VirtualList
:list="list1"
:itemHeight="40"
:height="400"
:itemKey="'id'"
@scrollToBottom="handleBottom"
@scroll="scroll"
:scrollToTop="scrollToTop2"
>
<template v-slot:header>this is header </template>
<template v-slot:item="{ item }">
<div
class="inner-item"
:style="{
outline: '1px solid red',
height: `40px`,
'outline-offset': '-2px',
'background-color': '#fff',
}"
>
{{ item.index }}
</div>
</template>
<template v-slot:footer>loading。。。 </template>
</VirtualList>
auto size height
import {AutoSizeVirtualList} from '.'
<AutoSizeVirtualList
:list="list1"
@scrollToBottom="handleBottom"
@scroll="scroll"
:scrollToTop="scrollToTop2"
:itemKey="'id'"
:itemHeight="40"
:height="400"
>
<template v-slot:header>this is header </template>
<template v-slot:item="{ item }">
<div
class="inner-item"
:style="{
outline: '1px solid red',
height: `${item.height}px`,
'outline-offset': '-2px',
'background-color': '#fff',
}"
>
{{ item.name }}
</div>
</template>
<template v-slot:footer>loading。。。 </template>
</AutoSizeVirtualList>
auto reverse size height
just use footer
<RevertAutoSizeVirtualList
:list="list1"
@scrollToBottom="handleBottom"
@scroll="scroll"
:scrollToTop="scrollToTop2"
:itemKey="'id'"
:itemHeight="40"
:height="400"
>
<template v-slot:item="{ item }">
<div
class="inner-item"
:style="{
outline: '1px solid red',
height: `${item.height}px`,
'outline-offset': '-2px',
'background-color': '#fff',
}"
>
{{ item.name }}
</div>
</template>
<template v-slot:footer>loading。。。 </template>
</RevertAutoSizeVirtualList>
APIS
Prop | Description | Type | Default |
---|---|---|---|
list | Data list | Array | - |
height | list height | number | 400 |
itemHeight | list item height | number | 40 |
minSize | show cnt | number | 20 |
itemKey | item keys | key in T | - |
scrollToTop | go to top | number | 0 |
scrollToBottom | scrolled to bottom | (e) => void | - |
you can see example demo