# useVirtualList

用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。

## 使用

```
<template>
  <div class="hello">
    <button
      style="margin-top: 30px"
      type="button"
      @click="handleVirtualScrollTo"
    >
      scroll to
    </button>
    <div
      :ref="containerProps.ref"
      @scroll="containerProps.onScroll"
      style="height: 300px; overflow: auto;border: 1px solid #cccccc"
    >
      <div :style="wrapperStyle">
        <div
          v-for="active in list"
          :key="active"
          style="
            height: 59px;
            border-bottom: 1px solid #cccccc;
            background-color: white;
          "
        >
          {{ active }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useVirtualList } from "v3hooks";

export default {
  props: {
    msg: String,
  },
  setup() {
    const { list, wrapperStyle, containerProps, scrollTo } = useVirtualList(
      Array.from(Array(99999).keys()),
      {
        itemHeight: 60,
        overscan: 10,
      }
    );

    const handleVirtualScrollTo = () => {
      scrollTo(22);
    };

    return {
      list,
      wrapperStyle,
      containerProps,
      handleVirtualScrollTo,
    };
  },
};
</script>
```

useVirtualList接受一个数组，导出一个虚拟化的list以元素配置，具体配置看Api

## Api

### Params

| 参数      | 说明              | 类型      | 默认值  |
| ------- | --------------- | ------- | ---- |
| arr     | 包含大量数据的列表       | T\[ ]   | \[ ] |
| options | 可选配置项，见 Options | Options | -    |

### Options

| 参数         | 说明                          | 类型     | 默认值                       |
| ---------- | --------------------------- | ------ | ------------------------- |
| itemHeight | 行高度，静态高度可以直接写入像素值，动态高度可传入函数 | number | (index: number) => number |
| overscan   | 视区上、下额外展示的 dom 节点数量         | number | 5                         |

### Result

| 参数             | 说明                   | 类型                      |
| -------------- | -------------------- | ----------------------- |
| list           | 当前需要展示的列表内容          | T\[ ]                   |
| containerProps | 滚动容器的 props          | object                  |
| wrapperStyle   | children 外层包裹器 Style | object                  |
| scrollTo       | 快速滚动到指定 index        | (index: number) => void |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yanzhandong868.gitbook.io/v3hooks/ui/usevirtuallist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.