# @webdevil/vue3-virtual-list

> ## Project setup ``` yarn install ```

Latest version **1.0.1** (published 2021-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @webdevil/vue3-virtual-list
pnpm add @webdevil/vue3-virtual-list
yarn add @webdevil/vue3-virtual-list
bun add @webdevil/vue3-virtual-list
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-11-24 |
| First published | 2021-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 226.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lijun |
| Maintainers | web_devil |
| Keywords | virtual, virtual list, vue3, scroll |

## Links

- npm: https://www.npmjs.com/package/@webdevil/vue3-virtual-list
- Repository: https://github.com/Li-DaDa/vue3-virtual-list
- Issues: https://github.com/Li-DaDa/vue3-virtual-list/issues
- npm.io page: https://npm.io/package/@webdevil/vue3-virtual-list

## Dependencies (2)

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

## Recent versions

- 1.0.1 (latest) — 2021-11-24

## README

# vue3-virtual-list

基于vue3的虚拟列表

## 安装

### npm

```js
npm install @webdevil/vue3-virtual-list --save
```

### yarn

```js
yarn add @webdevil/vue3-virtual-list
```

## 使用

```js
<template>
  <div style="width: 300px; height: 500px; margin: 50px auto;">
    <virtual-list :items="items" itemKey="id">
      <template v-slot="{ item, index }">
        <div style="padding: 50px; border-bottom: 1px solid #eee">index：{{ index }}-{{ item.name }}</div>
      </template>
    </virtual-list>
  </div>
</template>

// js
import { defineComponent, onMounted, ref } from 'vue'
import VirtualList from '@webdevil/vue3-virtual-list'
import "@webdevil/vue3-virtual-list/lib/index.css"

interface IItems {
  name: string;
  id: number
}

export default defineComponent({
  name: 'VirtualListDemo',
  components: {
    VirtualList
  },
  setup() {
    // 所有数据列表
    const items = ref<IItems[]>([])

    onMounted(() => {
      const list: IItems[] = []
      for(let i=0;i<10000; i++) {
        list.push({
          name: 'item_' + i,
          id: i
        })
      }
      items.value = list
    })

    return {
      items
    }
  }
})
```

## props参数

| prop | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| items | 需要显示的所有列表数据 | any[] | 必填 |
| distance | 顶部内卷条数，滚动区域上部分数据超过该值，则会触发更新 | number | 10 |
| showLength | 显示的数据条数 | number | 30 |
| itemKey | vue循环列表的key | string | 默认取数据的index |

## slot参数

| | 说明 |
| --- | --- |
| item | 对应items中的每一项 |
| index | 在items中的索引 |

## 效果展示

![效果图](./docs/assets/1.png)

## 源码地址

[github](https://github.com/Li-DaDa/vue3-virtual-list)

---
_Source: https://npm.io/package/@webdevil/vue3-virtual-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._