1
1
<p >
2
- <a href="https://travis-ci.org/tangbc/vue-virtual-scroll-list">
3
- <img alt="Travis CI Status" src="https://travis-ci.org/tangbc/vue-virtual-scroll-list.svg?branch=master"/>
4
- </a>
5
- <a href="https://codecov.io/gh/tangbc/vue-virtual-scroll-list">
6
- <img alt="Code Coverage" src="https://codecov.io/gh/tangbc/vue-virtual-scroll-list/branch/master/graph/badge.svg"/>
7
- </a>
8
- <a href="https://npmjs.com/package/vue-virtual-scroll-list">
9
- <img alt="NPM downloads" src="https://img.shields.io/npm/dm/vue-virtual-scroll-list.svg">
10
- </a>
11
- <a href="http://packagequality.com/#?package=vue-virtual-scroll-list">
12
- <img alt="Package quality" src="https://npm.packagequality.com/shield/vue-virtual-scroll-list.svg">
13
- </a>
14
- <a href="https://npmjs.com/package/vue-virtual-scroll-list">
15
- <img alt="NPM version" src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg"/>
16
- </a>
17
- <a href="https://vuejs.org/">
18
- <img alt="Vue version" src="https://img.shields.io/badge/vue-%3E=2.3.0-brightgreen.svg"/>
19
- </a>
20
- <a href="https://opensource.org/licenses/MIT">
21
- <img alt="License" src="https://img.shields.io/npm/l/vue-virtual-scroll-list.svg">
22
- </a>
2
+ <a href =" https://travis-ci.org/tangbc/vue-virtual-scroll-list " >
3
+ <img alt="Travis CI Status" src="https://travis-ci.org/tangbc/vue-virtual-scroll-list.svg?branch=master"/>
4
+ </a >
5
+ <a href =" https://codecov.io/gh/tangbc/vue-virtual-scroll-list " >
6
+ <img alt="Code Coverage" src="https://codecov.io/gh/tangbc/vue-virtual-scroll-list/branch/master/graph/badge.svg"/>
7
+ </a >
8
+ <a href =" https://npmjs.com/package/vue-virtual-scroll-list " >
9
+ <img alt="NPM downloads" src="https://img.shields.io/npm/dm/vue-virtual-scroll-list.svg">
10
+ </a >
11
+ <a href =" http://packagequality.com/#?package=vue-virtual-scroll-list " >
12
+ <img alt="Package quality" src="https://npm.packagequality.com/shield/vue-virtual-scroll-list.svg">
13
+ </a >
14
+ <a href =" https://npmjs.com/package/vue-virtual-scroll-list " >
15
+ <img alt="NPM version" src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg"/>
16
+ </a >
17
+ <a href =" https://vuejs.org/ " >
18
+ <img alt="Vue version" src="https://img.shields.io/badge/vue-%3E=2.3.0-brightgreen.svg"/>
19
+ </a >
20
+ <a href =" https://opensource.org/licenses/MIT " >
21
+ <img alt="License" src="https://img.shields.io/npm/l/vue-virtual-scroll-list.svg">
22
+ </a >
23
23
</p >
24
24
25
25
## Table of contents
28
28
* [ Live demos] ( #live-demos )
29
29
* [ How it works] ( #how-it-works )
30
30
* [ Simple usage] ( #simple-usage )
31
- * [ vfor-mode] ( #vfor-mode )
32
- * [ item-mode] ( #item-mode )
33
- * [ variable height] ( #variable-height )
31
+ * [ vfor-mode] ( #vfor-mode )
32
+ * [ item-mode] ( #item-mode )
33
+ * [ variable height] ( #variable-height )
34
34
* [ Performance comparison] ( #performance-comparison )
35
- * [ Build time wasted] ( #build-time-wasted )
36
- * [ Total memory used] ( #total-memory-used )
35
+ * [ Build time wasted] ( #build-time-wasted )
36
+ * [ Total memory used] ( #total-memory-used )
37
37
* [ Attentions] ( #attentions )
38
38
* [ ** Props type** ] ( #props-type )
39
39
* [ Public methods] ( #public-methods )
@@ -80,23 +80,23 @@ All you need to care about is only data!
80
80
81
81
``` vue
82
82
<template>
83
- <div>
84
- <virtual-list :size="40" :remain="8">
85
- <item v-for="item of items" :key="item.id" />
86
- </virtual-list>
87
- </div>
83
+ <div>
84
+ <virtual-list :size="40" :remain="8">
85
+ <item v-for="item of items" :key="item.id" />
86
+ </virtual-list>
87
+ </div>
88
88
</template>
89
89
<script>
90
- import item from '../item.vue'
91
- import virtualList from 'vue-virtual-scroll-list'
92
- export default {
93
- data () {
94
- return {
95
- items: [ {id: 1}, {id: 2}, {id: 3}, ... ]
96
- }
97
- },
98
- components: { item, 'virtual-list': virtualList }
99
- }
90
+ import item from '../item.vue'
91
+ import virtualList from 'vue-virtual-scroll-list'
92
+ export default {
93
+ data () {
94
+ return {
95
+ items: [ {id: 1}, {id: 2}, {id: 3}, ... ]
96
+ }
97
+ },
98
+ components: { item, 'virtual-list': virtualList }
99
+ }
100
100
</script>
101
101
```
102
102
@@ -106,36 +106,36 @@ This mode can save a considerable amount of memory and performance. Props `item`
106
106
107
107
``` vue
108
108
<template>
109
- <div>
110
- <virtual-list :size="40" :remain="8"
111
- :item="item"
112
- :itemcount="100000"
113
- :itemprops="getItemprops"
114
- />
115
- </div>
109
+ <div>
110
+ <virtual-list :size="40" :remain="8"
111
+ :item="item"
112
+ :itemcount="100000"
113
+ :itemprops="getItemprops"
114
+ />
115
+ </div>
116
116
</template>
117
117
<script>
118
- import itemComponent from '../item.vue'
119
- import virtualList from 'vue-virtual-scroll-list'
120
- export default {
121
- data () {
122
- return {
123
- item: itemComponent,
124
- }
125
- },
126
- methods: {
127
- getItemprops (itemIndex) {
128
- // <item/> will render with following data object:
129
- // https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
130
- return {
131
- props: itemProps,
132
- attrs: itemAttrs,
133
- ...
134
- }
135
- }
136
- },
137
- components: { 'virtual-list': virtualList }
138
- }
118
+ import itemComponent from '../item.vue'
119
+ import virtualList from 'vue-virtual-scroll-list'
120
+ export default {
121
+ data () {
122
+ return {
123
+ item: itemComponent,
124
+ }
125
+ },
126
+ methods: {
127
+ getItemprops (itemIndex) {
128
+ // <item/> will render with following data object:
129
+ // https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
130
+ return {
131
+ props: itemProps,
132
+ attrs: itemAttrs,
133
+ ...
134
+ }
135
+ }
136
+ },
137
+ components: { 'virtual-list': virtualList }
138
+ }
139
139
</script>
140
140
141
141
```
@@ -149,11 +149,11 @@ Using variable height, props `remain` and `size` is still required. All the inde
149
149
If you assign ` variable ` as ` true ` , ** do not** set inline style height inside ` <item/> ` component, you ** must** set inline style height on ` <item/> ` component outside directly, such as:
150
150
``` vue
151
151
<template>
152
- <div>
153
- <virtual-list :size="40" :remain="8" :variable="true">
154
- <item v-for="item of items" :key="item.id" :style="{ height: item.height + 'px' }" />
155
- </virtual-list>
156
- </div>
152
+ <div>
153
+ <virtual-list :size="40" :remain="8" :variable="true">
154
+ <item v-for="item of items" :key="item.id" :style="{ height: item.height + 'px' }" />
155
+ </virtual-list>
156
+ </div>
157
157
</template>
158
158
```
159
159
0 commit comments