|
15 | 15 |
|
16 | 16 | * Tiny and very easy to use.
|
17 | 17 |
|
18 |
| -* Big data list and infinite loading with high performance. |
| 18 | +* Big data list with high performance. |
| 19 | + |
| 20 | +* Support fixed height and variable height. |
19 | 21 |
|
20 | 22 | * Support set the initial scroll index or change any.
|
21 | 23 |
|
|
26 | 28 |
|
27 | 29 | * [vue-virtual-scroll-list with 100,000 finite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/finite/).
|
28 | 30 |
|
29 |
| -* [vue-virtual-scroll-list infinite data by request 20 each time](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/). |
| 31 | +* [vue-virtual-scroll-list with requesting infinite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/). |
| 32 | + |
| 33 | +* [vue-virtual-scroll-list with variable height](https://tangbc.github.io/vue-virtual-scroll-list/examples/variable-height/). |
30 | 34 |
|
31 | 35 |
|
32 | 36 | ## How it works
|
|
42 | 46 | npm install vue-virtual-scroll-list --save
|
43 | 47 | ```
|
44 | 48 |
|
45 |
| -```javascript |
| 49 | +```vue |
46 | 50 | <template>
|
47 | 51 | <div>
|
48 | 52 | <virtualList :size="40" :remain="8">
|
@@ -76,8 +80,8 @@ The `<Item>` component is included inside but defined outside the `<virtualList>
|
76 | 80 | <script src="https://tangbc.github.io/vue-virtual-scroll-list/index.js"></script>
|
77 | 81 |
|
78 | 82 | <div id="app">
|
79 |
| - <virtual-list :size="40" :remain="8"> |
80 |
| - <div class="item" v-for="(item, index) of items" :key="index">Item: # {{ index }}</div> |
| 83 | + <virtual-list :size="40" :remain="8" wtag="ul"> |
| 84 | + <li class="item" v-for="(item, index) of items" :key="index">Item: # {{ index }}</li> |
81 | 85 | </virtual-list>
|
82 | 86 | </div>
|
83 | 87 | ```
|
@@ -114,12 +118,12 @@ new Vue({
|
114 | 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. |
|
115 | 119 | | 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. |
|
116 | 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;` |
|
117 |
| -| rclass | String | * | Default value is an empty string, the virtual-list root HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) | |
118 | 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;` |
|
119 |
| -| wclass | String | * | Default value is an empty string, the virtual-list item wrapper HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) | |
| 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) | |
120 | 123 | | onscroll | Function | * | Called when virtual-list scroll event handling, param: `(e, scrollTop)`. |
|
121 | 124 | | totop | Function | * | Called when the virtual-list is scrolled to top. |
|
122 | 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. | |
123 | 127 |
|
124 | 128 |
|
125 | 129 | ## Contributions
|
|
0 commit comments