wang-vue-virtual-list

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