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