1
1
<a href =" https://npmjs.com/package/vue-virtual-scroll-list " >
2
- <img src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg?style=flat" alt="NPM version"/>
2
+ <img src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg?style=flat" alt="NPM version"/>
3
3
</a >
4
4
<a href =" https://vuejs.org/ " >
5
- <img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg" alt="Vue version"/>
5
+ <img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg" alt="Vue version"/>
6
6
</a >
7
7
<a href =" https://github.com/tangbc/vue-virtual-scroll-list/blob/master/LICENSE " >
8
- <img src="https://img.shields.io/github/license/tangbc/vue-virtual-scroll-list.svg" alt="MIT License"/>
8
+ <img src="https://img.shields.io/github/license/tangbc/vue-virtual-scroll-list.svg" alt="MIT License"/>
9
9
</a >
10
10
11
11
## vue-virtual-scroll-list
20
20
21
21
## Demos
22
22
23
- * [ vue-virtual-scroll-list with 100,000 finite data] ( https://tangbc.github.io/vue-virtual-scroll-list/demo /finite/ ) .
23
+ * [ vue-virtual-scroll-list with 100,000 finite data] ( https://tangbc.github.io/vue-virtual-scroll-list/examples /finite/ ) .
24
24
25
- * [ vue-virtual-scroll-list infinite data by increasing 20 each time] ( https://tangbc.github.io/vue-virtual-scroll-list/demo /infinite/ ) .
25
+ * [ vue-virtual-scroll-list infinite data by increasing 20 each time] ( https://tangbc.github.io/vue-virtual-scroll-list/examples /infinite/ ) .
26
26
27
27
28
- ## Example
28
+ ## Usage
29
29
30
30
#### Using by npm:
31
31
@@ -35,26 +35,26 @@ npm install vue-virtual-scroll-list --save
35
35
36
36
``` javascript
37
37
< template>
38
- < div>
39
- < virtualList : size= " 40" : remain= " 8" >
40
- < Item v- for = " (item, index) of items" : item= " item" : key= " item.id" / >
41
- < / virtualList>
42
- < / div>
38
+ < div>
39
+ < virtualList : size= " 40" : remain= " 8" >
40
+ < Item v- for = " (item, index) of items" : item= " item" : key= " item.id" / >
41
+ < / virtualList>
42
+ < / div>
43
43
< / template>
44
44
45
45
< script>
46
- import Item from ' ../item.vue' ;
47
- import virtualList from ' vue-virtual-scroll-list' ;
48
-
49
- export default {
50
- name: ' demo' ,
51
- data () {
52
- return {
53
- items: [... ]
54
- }
55
- },
56
- components: { Item, virtualList }
57
- }
46
+ import Item from ' ../item.vue'
47
+ import virtualList from ' vue-virtual-scroll-list'
48
+
49
+ export default {
50
+ name: ' demo' ,
51
+ data () {
52
+ return {
53
+ items: [... ]
54
+ }
55
+ },
56
+ components: { Item, virtualList }
57
+ }
58
58
< / script>
59
59
```
60
60
@@ -67,21 +67,21 @@ The `<Item>` component is included inside but defined outside the `<virtualList>
67
67
<script src =" https://tangbc.github.io/vue-virtual-scroll-list/dist/vue-virtual-scroll-list.js" ></script >
68
68
69
69
<div id =" app" >
70
- <virtual-list :size =" 40" :remain =" 8" >
71
- <div class =" item" v-for =" (item, index) of items" :key =" index" >Item: # {{ index }}</div >
72
- </virtual-list >
70
+ <virtual-list :size =" 40" :remain =" 8" >
71
+ <div class =" item" v-for =" (item, index) of items" :key =" index" >Item: # {{ index }}</div >
72
+ </virtual-list >
73
73
</div >
74
74
```
75
75
76
76
``` javascript
77
77
new Vue ({
78
- el: ' #app' ,
79
- data: {
80
- items: new Array (100000 )
81
- },
82
- components: {
83
- ' virtual-list' : VirutalList
84
- }
78
+ el: ' #app' ,
79
+ data: {
80
+ items: new Array (100000 )
81
+ },
82
+ components: {
83
+ ' virtual-list' : VirutalList
84
+ }
85
85
});
86
86
```
87
87
0 commit comments