Skip to content

Commit 3a8c94b

Browse files
committed
Update readme.
1 parent 6eeeba2 commit 3a8c94b

File tree

1 file changed

+21
-15
lines changed

1 file changed

+21
-15
lines changed

README.md

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<a href="https://npmjs.com/package/vue-virtual-scroll-list">
22
<img src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg?style=flat" alt="NPM version"/>
33
</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>
410
<a href="https://vuejs.org/">
511
<img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg" alt="Vue version"/>
612
</a>
@@ -13,7 +19,7 @@
1319

1420
> A vue (2.x) component that supports big data and infinite loading by using virtual scroll list.
1521
16-
* Tiny and very easy to use.
22+
* Tiny and very very easy to use.
1723

1824
* Big data list with high performance.
1925

@@ -71,17 +77,17 @@ npm install vue-virtual-scroll-list --save
7177
</script>
7278
```
7379

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.
7581

76-
#### Using by script tag:
82+
#### Using by script include:
7783

7884
```html
7985
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
8086
<script src="https://tangbc.github.io/vue-virtual-scroll-list/index.js"></script>
8187

8288
<div id="app">
8389
<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>
8591
</virtual-list>
8692
</div>
8793
```
@@ -112,22 +118,22 @@ new Vue({
112118

113119
*Prop* | *Type* | *Required* | *Description* |
114120
:--- | :--- | :--- | :--- |
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). |
117123
| 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. |
119125
| 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. |
127133

128134
### About variable height
129135

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.
131137

132138

133139
## Contributions

0 commit comments

Comments
 (0)