Skip to content

Commit 3b98959

Browse files
committed
Add readme.
1 parent 03ccf54 commit 3b98959

File tree

1 file changed

+81
-0
lines changed

1 file changed

+81
-0
lines changed

README.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<a href="https://npmjs.com/package/vue-virtual-scroll-list">
2+
<img src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg?style=flat" alt="NPM version"/>
3+
</a>
4+
5+
## vue-virtual-scroll-list
6+
7+
> A vue component that support big data by using virtual scroll list. Tiny, smooth and without any dependence.
8+
9+
10+
## How it works
11+
12+
<img src="https://tangbc.github.io/github-images/virtual-scroll-list-4.gif">
13+
14+
15+
## Demos
16+
17+
* [vue-virtual-scroll-list with 10,0000 finite data](https://tangbc.github.io/vue-virtual-scroll-list/demo/finite/).
18+
19+
* [vue-virtual-scroll-list infinite data by increasing 20 each time](https://tangbc.github.io/vue-virtual-scroll-list/demo/infinite/).
20+
21+
22+
## Usage
23+
24+
Using by npm:
25+
26+
```
27+
npm install vue-virtual-scroll-list --save
28+
```
29+
30+
31+
## Example
32+
33+
Using Vue single file components:
34+
35+
```javascript
36+
<template>
37+
<div>
38+
<VirtualList
39+
:size="40"
40+
:remain="8"
41+
>
42+
<Item v-for="(item, index) of items" :item="item" :key="item.id" />
43+
</VirtualList>
44+
</div>
45+
</template>
46+
47+
<script>
48+
import Item from '../item.vue';
49+
import VirtualList from 'vue-virtual-scroll-list';
50+
51+
export default {
52+
name: 'demo',
53+
54+
components: { Item, VirtualList },
55+
56+
data () {
57+
return {
58+
items: [...]
59+
}
60+
}
61+
}
62+
</script>
63+
```
64+
65+
The `<Item />` component is defined outside but included inside the `<VirtualList />` component. `VirtualList` has nothing to do with `<Item />`, so you can use virtual list with any list item component your project need, you just want to care about component `<Item />` and data `items`.
66+
67+
68+
## Support props type
69+
70+
*Prop* | *Type* | *Required* | *Description* |
71+
:--- | :--- | :--- | :--- |
72+
| size | Number || Each list item height (pixel). |
73+
| remain | Number || How many items except show in virtual list viewport, so `size` and `remian` will determine the virtual list outside container height (size × remian). |
74+
| onScroll | Function | * | Call on virtual list scroll event hanlding, param: `(scrollTop, e)` |
75+
| toTop | Event | * | An event emit by virtual list component when the list is scrolled on top. |
76+
| toBottom | Event | * | An event emit by virtual list component when the list is scrolled on bottom. |
77+
78+
79+
## License
80+
81+
[MIT License](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/LICENSE)

0 commit comments

Comments
 (0)