# vue-long-list

> High performance long list for Vue.js

Latest version **0.1.6** (published 2017-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-long-list
pnpm add vue-long-list
yarn add vue-long-list
bun add vue-long-list
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2017-03-29 |
| First published | 2016-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kerryChen95 |
| Maintainers | kerrychen95 |
| Keywords | vue, vue.js, list, long-list, circle-list, performance |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2017-03-29
- 0.1.5 — 2016-11-17
- 0.1.4 — 2016-11-15
- 0.1.3 — 2016-11-15
- 0.1.2 — 2016-11-14
- 0.1.1 — 2016-11-11
- 0.1.0 — 2016-11-11

## README

# Vue Long List

High performance long list for Vue.js (Currently only Vue.js@1.x).

* Support multiple items per line.
* Support scroll on y/x axis.
* Currently only support all items are at uniform size.

## Example

```javascript
import {LongList, LongListItem} from 'vue-long-list'

export default {
  components: {LongList, LongListItem},
  props: {
    listData: {
      type: Array,
      required: true,
    },
  },
  data () {
    return {
      listRenderStart: 0,
      listRenderLength: 10,
    }
  },
}
```

```html
<long-list
  mode="uniform"
  :length="listData.length"
  :render-start.sync="listRenderStart"
  :render-length.sync="listRenderLength"
>
  <!--
  <long-list-item> should be the only children of <long-list>.
  For better performance, track by id from item data if exist, otherwise by the
  index of whole list, instead of by the index of `limitBy` filter's iteration
  which always count index from 0 even when `listRenderStart` is not 0.
  -->
  <long-list-item
    v-for="itemData in listData | limitBy listRenderLength listRenderStart"
    :track-by="listRenderStart + $index"
  >
    <!--
    Render item data as you want.
    There is no any DOM element of <long-list-item>, only `.item` elements
    provided by you, so you can style each item as you want.
    -->
    <div class="item">
      {{itemData}}
    </div>
  </long-list-item>
</long-list>
```

## Runnable Examples

1. Clone this repo
2. `npm install`
3. `npm run examples`
4. open `dist-examples/index.html` by browser

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