|
12 | 12 |
|
13 | 13 | > A vue (2.x) component support big data and infinite loading by using virtual scroll list.
|
14 | 14 |
|
| 15 | +* Tiny and easy to use. |
| 16 | + |
| 17 | +* Big data list and infinite loading. |
| 18 | + |
| 19 | +* Set the initial scroll index or change any. |
| 20 | + |
| 21 | +* List scrolling, to top and bottom can be detected. |
| 22 | + |
15 | 23 |
|
16 | 24 | ## How it works
|
17 | 25 |
|
|
22 | 30 |
|
23 | 31 | * [vue-virtual-scroll-list with 100,000 finite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/finite/).
|
24 | 32 |
|
25 |
| -* [vue-virtual-scroll-list infinite data by increasing 20 each time](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/). |
| 33 | +* [vue-virtual-scroll-list infinite data by request 20 each time](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/). |
26 | 34 |
|
27 | 35 |
|
28 | 36 | ## Usage
|
@@ -74,36 +82,37 @@ The `<Item>` component is included inside but defined outside the `<virtualList>
|
74 | 82 | ```
|
75 | 83 |
|
76 | 84 | ```javascript
|
| 85 | +// Global name as `VirutalScrollList` |
| 86 | +Vue.component('virtual-list', VirutalScrollList) |
| 87 | + |
77 | 88 | new Vue({
|
78 | 89 | el: '#app',
|
79 | 90 | data: {
|
80 | 91 | items: new Array(100000)
|
81 |
| - }, |
82 |
| - components: { |
83 |
| - 'virtual-list': VirutalScrollList // Global name as `VirutalScrollList` |
84 | 92 | }
|
85 |
| -}); |
| 93 | +}) |
86 | 94 | ```
|
87 | 95 |
|
88 | 96 | **Notice: list Item component or DOM frag using `v-for` must designate the `:key` property.**
|
89 | 97 |
|
90 | 98 |
|
91 |
| -## Support props type |
| 99 | +## Props |
92 | 100 |
|
93 | 101 | *Prop* | *Type* | *Required* | *Description* |
|
94 | 102 | :--- | :--- | :--- | :--- |
|
95 | 103 | | size | Number | ✓ | Each list item height, currently only supports fixed height. |
|
96 | 104 | | 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). |
|
| 105 | +| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, do nothing but throw a warnning if not match. | |
97 | 106 | | rtag | String | * | Default value is `div`, the virtual-list's root HTMLElement tag name, in all case it's style is set to `display: block;` |
|
98 | 107 | | wtag | String | * | Default value is `div`, the virtual-list's item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` |
|
99 |
| -| onScroll | Function | * | Call on virtual-list scroll event hanlding, param: `(e, scrollTop)` | |
100 |
| -| toTop | Event | * | An event emit by virtual-list component when the list is scrolled on top. | |
101 |
| -| toBottom | Event | * | An event emit by virtual-list component when the list is scrolled on bottom. | |
| 108 | +| onscroll | Function | * | Call on virtual-list scroll event hanlding, param: `(e, scrollTop)`. | |
| 109 | +| totop | Function | * | A function triggered when the virtual-list is scrolled to top. | |
| 110 | +| tobottom | Function | * | A function triggered when the virtual-list is scrolled to bottom. | |
102 | 111 |
|
103 | 112 |
|
104 | 113 | ## Contributions
|
105 | 114 |
|
106 |
| -Welcome to improve vue-virtual-scroll-list by any pull request or issue! |
| 115 | +Welcome to improve vue-virtual-scroll-list by any pull request or issue. |
107 | 116 |
|
108 | 117 |
|
109 | 118 | ## License
|
|
0 commit comments