# vritual-scroll

> Reuse element, realize multi-element high efficiency rolling for vue3

Latest version **1.0.8** (published 2022-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vritual-scroll
pnpm add vritual-scroll
yarn add vritual-scroll
bun add vritual-scroll
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-01-18 |
| First published | 2022-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 163 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | houchunyang |
| Maintainers | chunyang001 |
| Keywords | vue3, vritual, scroll |

## Links

- npm: https://www.npmjs.com/package/vritual-scroll
- Repository: https://github.com/xuanyanghou/vritual-scroll
- Homepage: https://github.com/xuanyanghou/vritual-scroll#readme
- Issues: https://github.com/xuanyanghou/vritual-scroll/issues
- npm.io page: https://npm.io/package/vritual-scroll

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.0

## Recent versions

- 1.0.8 (latest) — 2022-01-18
- 1.0.7 — 2022-01-17
- 1.0.6 — 2022-01-17
- 1.0.5 — 2022-01-17
- 1.0.4 — 2022-01-17
- 1.0.3 — 2022-01-17
- 1.0.1 — 2022-01-17
- 1.0.0 — 2022-01-17

## README

# vritual-scroll

> vue3 版本大数据滚动列表，复用已有 dom，优化渲染效率

## 安装

```bash
$ npm install vritual-scroll -S
```

## 使用

在 `main.js` 文件中引入插件并注册

```bash
# main.js
import VritualScroll from 'VritualScroll'
import 'vritual-scroll/dist/vritual-scroll.css'
Vue.use(VritualScroll)
```

在项目中用使用 VritualScroll

```js
<template>
  <vritual-scroll
    style="height: 300px;"
    :domHeight=300
    :listData="list">
    <template v-slot:default="slotProps">
      // 自定义展示内容
      <div>{{slotProps.row.name}}</div>
    </template>
  </vritual-scroll>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    const list = reactive([])
    return {
      list
    }
  }
})
</script>
```

## 参数

| 参数      | 说明     | 类型   | 默认值 |
| --------- | -------- | ------ | ------ |
| list      | 数据源   | Array  | []     |
| itemSize  | 每项高度 | Number | 80     |
| domHeight | 外层高度 | Number | 300    |

---
_Source: https://npm.io/package/vritual-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._