Getting Started

Usage

npm

  $ npm install vue-virt-list

pnpm

  $ pnpm install vue-virt-list

yarn

  $ yarn add vue-virt-list

Dependencies

• "vue": "^2.0.0 || >=3.0.0"

Vue Version Notes

For <=vue2.6, you need to install @vue/composition-api manually. For >=vue2.7, composition-api is built-in, so no additional setup is required.

Attention!!!

1. list.item.id
2. cannot be used between item elements

Import and Usage

<template>
  <div style="width: 500px; height: 400px">
    <VirtList itemKey="id" :list="list" :minSize="20">
      <template #default="{ itemData, index }">
        <div>{{ index }} - {{ itemData.id }} - {{ itemData.text }}</div>
      </template>
    </VirtList>
  </div>
</template>

<script>
  import { VirtList } from 'vue-virt-list';
  export default {
    components: { VirtList },
    data() {
      return {
        list: [{ id: 0, text: 'text' }],
      };
    },
  };
</script>