|
1 | 1 | <a href="https://npmjs.com/package/vue-virtual-scroll-list">
|
2 | 2 | <img src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg?style=flat" alt="NPM version"/>
|
3 | 3 | </a>
|
| 4 | +<a href="https://npmjs.com/package/vue-virtual-scroll-list"> |
| 5 | + <img src="https://img.shields.io/npm/dm/vue-virtual-scroll-list.svg"> |
| 6 | +</a> |
| 7 | +<a href="http://packagequality.com/#?package=vue-virtual-scroll-list"> |
| 8 | + <img src="http://npm.packagequality.com/shield/vue-virtual-scroll-list.svg"> |
| 9 | +</a> |
4 | 10 | <a href="https://vuejs.org/">
|
5 | 11 | <img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg" alt="Vue version"/>
|
6 | 12 | </a>
|
|
13 | 19 |
|
14 | 20 | > A vue (2.x) component that supports big data and infinite loading by using virtual scroll list.
|
15 | 21 |
|
16 |
| -* Tiny and very easy to use. |
| 22 | +* Tiny and very very easy to use. |
17 | 23 |
|
18 | 24 | * Big data list with high performance.
|
19 | 25 |
|
@@ -71,17 +77,17 @@ npm install vue-virtual-scroll-list --save
|
71 | 77 | </script>
|
72 | 78 | ```
|
73 | 79 |
|
74 |
| -The `<Item>` component is included inside but defined outside the `<virtualList>` component. We see that `<virtualList>` does **not** rely on the `<Item>` component. So you can use virtual-list with any list item component freely. |
| 80 | +The `<Item>` component is included inside but defined outside the `<virtualList>` component. We see that `<virtualList>` does **not** rely on the `<Item>` component. So you can use virtual-list with any component freely. |
75 | 81 |
|
76 |
| -#### Using by script tag: |
| 82 | +#### Using by script include: |
77 | 83 |
|
78 | 84 | ```html
|
79 | 85 | < script src= "https://unpkg.com/[email protected]/dist/vue.js"></ script>
|
80 | 86 | <script src="https://tangbc.github.io/vue-virtual-scroll-list/index.js"></script>
|
81 | 87 |
|
82 | 88 | <div id="app">
|
83 | 89 | <virtual-list :size="40" :remain="8" wtag="ul">
|
84 |
| - <li class="item" v-for="(item, index) of items" :key="index">Item: # {{ index }}</li> |
| 90 | + <li class="item" v-for="(udf, index) of items" :key="index">Item: # {{ index }}</li> |
85 | 91 | </virtual-list>
|
86 | 92 | </div>
|
87 | 93 | ```
|
@@ -112,22 +118,22 @@ new Vue({
|
112 | 118 |
|
113 | 119 | *Prop* | *Type* | *Required* | *Description* |
|
114 | 120 | :--- | :--- | :--- | :--- |
|
115 |
| -| size | Number | ✓ | Each list item height, in variable height mode, this props just use to calculate the virtual-list viewport height. | |
116 |
| -| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` will determine the virtual-list outside container height (size × remian). | |
| 121 | +| size | Number | ✓ | Each list item height, in variable height mode, this prop just use to calculate the virtual-list viewport height. | |
| 122 | +| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (size × remian). | |
117 | 123 | | bench | Number | * | Default value is equal to `remain`, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved. |
|
118 |
| -| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, throws a warning if index does not exist. | |
| 124 | +| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if out of range it will be turned to `0` or the last one. | |
119 | 125 | | debounce | Number | * | **It's disabled by default**, milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance. |
|
120 |
| -| rtag | String | * | Default value is `div`, the virtual-list root HTMLElement tag name, in all case it's style is set to `display: block;` | |
121 |
| -| wtag | String | * | Default value is `div`, the virtual-list item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` | |
122 |
| -| wclass | String | * | Default value is an empty string, the virtual-list item wrapper HTMLElement tag's classes. Has the same API with [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) | |
123 |
| -| onscroll | Function | * | Called when virtual-list scroll event handling, param: `(e, { start, end, offset })`. | |
124 |
| -| totop | Function | * | Called when the virtual-list is scrolled to top. | |
125 |
| -| tobottom | Function | * | Called when the virtual-list is scrolled to bottom. | |
126 |
| -| variable | Function | * | For using virtual-list with variable height, this props is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated. | |
| 126 | +| rtag | String | * | Default value is `div`, the virtual-list root element tag name, in all cases it's style is set to `display: block;` | |
| 127 | +| wtag | String | * | Default value is `div`, the virtual-list item wrapper element tag name, in all cases it's style is set to `display: block;` | |
| 128 | +| wclass | String | * | Default value is an empty string, the virtual-list item wrapper element class, has the same API with [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) | |
| 129 | +| onscroll | Function | * | Called when virtual-list scroll event handling, param: `(e, offset)`. | |
| 130 | +| totop | Function | * | Called when virtual-list is scrolled to top, no param. | |
| 131 | +| tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. | |
| 132 | +| variable | Function | * | For using virtual-list with variable height mode, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated. | |
127 | 133 |
|
128 | 134 | ### About variable height
|
129 | 135 |
|
130 |
| -In variable height mode, `size` is still required. All the index variable height and scroll offset will be cached by virtual-list after the binary-search calculate, if you want to change any `<Item/>` height from data, you should call virtual-list's `updateVariable(index)` method to clear the offset cached, refer to [variable example](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/variable/variable.vue#L1) source for more detail. |
| 136 | +In variable height mode, prop `size` is still required. All the index variable height and scroll offset will be cached by virtual-list after the binary-search calculate, if you want to change anyone `<Item/>` height from data, you should call virtual-list's `updateVariable(index)` method to clear the offset cached, refer to [variable example](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/variable/variable.vue#L1) source for detail. |
131 | 137 |
|
132 | 138 |
|
133 | 139 | ## Contributions
|
|
0 commit comments