# VirtualScroll

虚拟滚动组件（用于大量数据纯展示时使用）

## 虚拟滚动

<CodePreview src="/doc-comp/scroll/virtualScroll" :height="760">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper class="virtual-scroll-demo">
    <ADivider>基础滚动示例</ADivider>
    <div class="virtual-scroll-demo-wrap">
      <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
        <template #default="{ item }">
          <div class="virtual-scroll-demo__item">
            {{ item.title }}
          </div>
        </template>
      </VScroll>
    </div>

    <ADivider>即使不可见，也预先加载50条数据，防止空白</ADivider>
    <div class="virtual-scroll-demo-wrap">
      <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
        <template #default="{ item }">
          <div class="virtual-scroll-demo__item">
            {{ item.title }}
          </div>
        </template>
      </VScroll>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { VScroll } from '@eciol/share-ui';

  const data = (() => {
    const arr: any[] = [];
    for (let index = 1; index < 20000; index++) {
      arr.push({
        title: '列表项' + index,
      });
    }
    return arr;
  })();
</script>
<style lang="less" scoped>
  .virtual-scroll-demo {
    &-wrap {
      display: flex;
      justify-content: center;
      margin: 0 30%;
      background-color: @component-background;
    }

    &__item {
      height: 40px;
      padding: 0 20px;
      line-height: 40px;
      border-bottom: 1px solid @border-color-base;
    }
  }
</style>


```
</details>
</CodePreview>

## Usage

```vue
<template>
  <div class="p-4 virtual-scroll-demo">
    <ADivider>基础滚动示例</ADivider>
    <div class="virtual-scroll-demo-wrap">
      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300">
        <template v-slot="{ item }">
          <div class="virtual-scroll-demo__item">{{ item.title }}</div>
        </template>
      </VirtualScroll>
    </div>

    <ADivider>即使不可见，也预先加载50条数据，防止空白</ADivider>
    <div class="virtual-scroll-demo-wrap">
      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
        <template v-slot="{ item }">
          <div class="virtual-scroll-demo__item">{{ item.title }}</div>
        </template>
      </VirtualScroll>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { VirtualScroll } from '@eciol/share-ui';

  const data: any[] = (() => {
    const arr: any[] = [];
    for (let index = 1; index < 20000; index++) {
      arr.push({
        title: '列表项' + index,
      });
    }
    return arr;
  })();
</script>
<style lang="less" scoped>
  .virtual-scroll-demo {
    &-wrap {
      display: flex;
      margin: 0 30%;
      background: #fff;
      justify-content: center;
    }

    /deep/ &__item {
      height: 40px;
      padding: 0 20px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
    }
  }
</style>
```

## Props

| 属性       | 类型             | 默认值 | 可选值 | 说明               |
| ---------- | ---------------- | ------ | ------ | ------------------ |
| height     | `string｜number` | -      | -      | 高度               |
| width      | `string｜number` | -      | -      | 宽度               |
| maxHeight  | `string｜number` | -      | -      | 最大高度           |
| maxWidth   | `string｜number` | -      | -      | 最大宽度           |
| minHeight  | `string｜number` | -      | -      | 最小高度           |
| minWidth   | `string｜number` | -      | -      | 最小宽度           |
| itemHeight | `string｜number` | -      | -      | 每个选项高度，必传 |
| items      | `any[]`          | -      | -      | 选项列表           |

## Slots

| 名称    | 说明 |
| ------- | ---- |
| default | 默认 |