# large-list

> list container element for performance

Latest version **0.0.8** (published 2020-06-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install large-list
pnpm add large-list
yarn add large-list
bun add large-list
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2020-06-28 |
| First published | 2019-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Forzoom |
| Maintainers | forzoom |

## Links

- npm: https://www.npmjs.com/package/large-list
- Repository: https://github.com/Forzoom/large-list
- Homepage: https://github.com/Forzoom/large-list#readme
- Issues: https://github.com/Forzoom/large-list/issues
- npm.io page: https://npm.io/package/large-list

## Recent versions

- 0.0.8 (latest) — 2020-06-28
- 0.0.7 — 2020-04-27
- 0.0.6 — 2020-04-17
- 0.0.5 — 2020-04-17
- 0.0.4 — 2020-04-17
- 0.0.3 — 2020-04-17
- 0.0.2 — 2020-04-14
- 0.0.1 — 2019-12-03

## README

## Install

```bash
// npm
npm install large-list

// yarn
yarn add large-list
```

## Usage

```javascript
import LargeList from 'large-list';

Vue.component('LargeList', LargeList);
```

```html
<LargeList>
    <PostCard>
    </PostCard>
</LargeList>
```

子组件需要提供heightChange事件，并且将新的高度newHeight，以及自身的id作为事件参数。

```javascript
export default {
    name: 'PostCard',
    mounted() {
        this.$emit('heightChange', newHeight, id);
    },
}
```

## API

### LargeList Component

#### Props

```
interface PersistenceOptions {
    metaMap: MetaMap;
    startIndex: nuumber;
    endIndex: number;
    containerHeight: number;
}
```

------
key|type|required|default|description
---|---|---|---|---
list              | ListItem[]                   | true  |       | data list
defaultItemHeight | number                       | false | 100   | default height of list item
defaultItemGap    | number                       | false | 10      default gap width of two list item
preloadHeight     | number                       | false | 200   | 预先检测的高度
persistence       | (PersistenceOptions) => void | false |       | 当传入persistence时，将尝试向persistence传入这些需要存储的数据
load              | () => PersistenceOptions     | false |       |当传入load时，将尝试通过load函数获取之前存储的数据

#### Event

----
name|description
---|---

## Roadmap:

1. 考虑将render中的scopeSlots替换成事件逻辑

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