You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-46Lines changed: 25 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,8 +29,6 @@
29
29
*[Total memory used](#total-memory-used)
30
30
*[How it works](#how-it-works)
31
31
*[Simple usage](#simple-usage)
32
-
*[Using by npm module](#using-by-npm-module)
33
-
*[Using by script include](#using-by-script-include)
34
32
*[Attentions](#attentions)
35
33
*[Props type](#props-type)
36
34
*[Public methods](#public-methods)
@@ -43,7 +41,7 @@
43
41
44
42
## Advantages
45
43
46
-
* Tiny and very very easy to use.
44
+
* Tiny and very easy to use.
47
45
48
46
* Big data list with high performance.
49
47
@@ -56,13 +54,15 @@
56
54
57
55
## Live demos
58
56
59
-
*[Use with item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
57
+
*[Build 100,000 items with item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
60
58
61
-
*[Use with vfor-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/vfor-mode).
59
+
*[Build 100,000 items with vfor-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/vfor-mode).
62
60
63
-
*[Use with variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
61
+
*[Build 100,000 items with variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
64
62
65
-
Besides, you can also compare the experience which **without using** virtual-list here: [without-virtual-list](https://tangbc.github.io/vue-virtual-scroll-list/demos/without-virtual-list).
63
+
The main difference between `item-mode` and `vfor-mode` is that: `item-mode` make a higher performance but not very convenient to handle changing data frequently; however, `vfor-mode` is just the opposite.
64
+
65
+
Besides, you can also compare the experience which without using virtual-list here: [without-virtual-list](https://tangbc.github.io/vue-virtual-scroll-list/demos/without-virtual-list).
66
66
67
67
68
68
## Performance comparison
@@ -71,19 +71,19 @@ According to the demos above, here are lists of approximate statistics:
<liclass="item"v-for="(udf, index) of items":key="index">Item: #{{ index }}</li>
133
-
</virtual-list>
134
-
</div>
135
-
```
136
-
137
-
```javascript
138
-
// Global name as `VirtualScrollList`
139
-
Vue.component('virtual-list', VirtualScrollList)
140
-
newVue({
141
-
el:'#app',
142
-
data: {
143
-
items:newArray(100000)
144
-
}
145
-
})
146
-
```
147
-
148
-
More use ways or get start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos) or [test suites](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/test).
122
+
**More use ways or getting start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos) or [test suites](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/test).**
149
123
150
124
151
125
## Attentions
152
126
153
127
* Must assign the `:key` property on `<item>` component or dom frag with `v-for` directive.
154
128
155
-
* Consider use`box-sizing: border-box` on `<item>` if you want absolutely correct scroll height.
129
+
* Consider using`box-sizing: border-box` on `<item>` if you want absolutely correct scroll height.
156
130
157
131
158
132
## Props type
@@ -205,9 +179,11 @@ If you assign `variable` as `true`, **do not** set inline style height inside `<
205
179
</template>
206
180
```
207
181
182
+
Corresponding example you can refer to the [demo of variable height](https://tangbc.github.io/vue-virtual-scroll-list/demos/variable-height).
183
+
208
184
### About item mode
209
185
210
-
Use`item-mode` can save a considerable amount of memory and performance (it's memory occupied is about only 1/10 of `vfor-mode`). In this mode, prop `item`, `itemcount` and `itemprops` are both required, and you don't have to put `<item/>` with a v-for frag inside `virtual-list`, just assign it as prop `item`:
186
+
Using`item-mode` can save a considerable amount of memory and performance. In this mode, prop `item`, `itemcount` and `itemprops` are both required, and you don't have to put `<item/>` with a v-for frag inside `virtual-list`, just assign it as prop `item`:
211
187
212
188
```vue
213
189
<template>
@@ -243,6 +219,8 @@ Use `item-mode` can save a considerable amount of memory and performance (it's m
243
219
244
220
```
245
221
222
+
Corresponding example you can refer to the [demo of item-mode](https://tangbc.github.io/vue-virtual-scroll-list/demos/item-mode).
223
+
246
224
247
225
## Contributions
248
226
@@ -253,6 +231,7 @@ Welcome to improve vue-virtual-scroll-list with any issue, pull request or code
253
231
254
232
Maintain and update occasionally, for changes see [release](https://github.com/tangbc/vue-virtual-scroll-list/releases).
0 commit comments