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
<liclass="item"v-for="(udf, index) of items":key="index">Item: #{{ index }}</li>
100
+
<liclass="item"v-for="(udf, index) of items":key="index">Item: #{{ index }}</li>
103
101
</virtual-list>
104
102
</div>
105
103
```
106
104
107
105
```javascript
108
106
// Global name as `VirtualScrollList`
109
107
Vue.component('virtual-list', VirtualScrollList)
110
-
111
108
newVue({
112
109
el:'#app',
113
110
data: {
@@ -116,6 +113,8 @@ new Vue({
116
113
})
117
114
```
118
115
116
+
More use ways or get start you can refer to these clearly [demos](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos).
117
+
119
118
120
119
## Attentions
121
120
@@ -130,7 +129,7 @@ new Vue({
130
129
131
130
*Prop* | *Type* | *Required* | *Description* |
132
131
:--- | :--- | :--- | :--- |
133
-
| size | Number | ✓ | Each list item height, in variable height mode, this prop just use to calculate the virtual-list outside container viewport height. |
132
+
| size | Number | ✓ | Each list item height, in variable height, this prop just use to calculate the virtual-list outside container viewport fixed height. |
134
133
| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (`size × remian`). |
135
134
| 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. |
136
135
| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if invalid there will be effected as `0` or the last one. |
@@ -142,10 +141,10 @@ new Vue({
142
141
| totop | Function | * | Called when virtual-list is scrolled to top, no param. |
143
142
| tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. |
144
143
| onscroll | Function | * | Called when virtual-list is scrolling, with param: [`(event, data)`](https://github.com/tangbc/vue-virtual-scroll-list/releases/tag/v1.1.7). |
145
-
| variable | Function or Boolean | * |For using virtual-list in `variable-mode`. If assign `Function`, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated. If assign `Boolean`, virtual-list will get each item variable height by it's inline style height automatic. |
146
-
| item | Component | * |For using virtual-list in `item-mode`. List item vue component, see [details](#about-item-mode) below. |
147
-
|itemdata|Array| * |For using virtual-list in `item-mode`. Prop data list or item slots assign to each item, see [details](#about-item-mode) below. |
148
-
|itemprop| Function | * |For using virtual-list in `item-mode`. Function call when each item is going to be rendered, see [details](#about-item-mode) below. |
144
+
| variable | Function or Boolean | * |Used in variable height, if assign `Function`, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated; if assign `Boolean`, virtual-list will get each item variable height by it's inline style height automatic. |
145
+
| item | Component | * |Used in `item-mode`, list item vue component. |
146
+
|itemcount|Number| * |Used in `item-mode`, list data total counts. |
147
+
|itemprops| Function | * |Used in `item-mode`, a function call when each item is going to be rendered. |
149
148
150
149
151
150
## Public methods
@@ -154,14 +153,14 @@ Here are some usefull public methods you can call via [`ref`](https://vuejs.org/
154
153
155
154
*`forceRender()`: force render virtual-list if you need or make it refresh.
156
155
157
-
*`updateVariable(index)`: update item height by index in variable height mode.
156
+
*`updateVariable(index)`: update item height by index in variable height list.
158
157
159
158
160
159
## Special scenes
161
160
162
-
### About variable mode
161
+
### About variable height
163
162
164
-
In `variable-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 cache, refer to [variable example](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/variable/variable.vue#L1) source for detail.
163
+
In variable height, prop `remain` and `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 public method `updateVariable(index)` to clear the offset cache.
165
164
166
165
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:
167
166
```vue
@@ -176,40 +175,33 @@ If you assign `variable` as `true`, **do not** set inline style height inside `<
176
175
177
176
### About item mode
178
177
179
-
Use `item-mode` can save a considerable amount of memory and performance, stats data check here: [#87](https://github.com/tangbc/vue-virtual-scroll-list/pull/87).
180
-
181
-
In this mode, prop `item``itemdata``itemprop` 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`:
178
+
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`:
182
179
183
180
```vue
184
181
<template>
185
182
<div>
186
183
<virtual-list :size="40" :remain="8"
187
184
:item="item"
188
-
:itemdata="itemdata"
189
-
:itemprop="itemprop"
185
+
:itemcount="100000"
186
+
:itemprops="getItemprops"
190
187
/>
191
188
</div>
192
189
</template>
193
190
194
191
<script>
195
192
import itemComponent from '../item.vue'
196
193
import virtualList from 'vue-virtual-scroll-list'
197
-
198
194
export default {
199
195
data () {
200
196
return {
201
197
item: itemComponent,
202
-
itemdata: [ {id: 1}, {id: 2}, {id: 3}, ... ]
203
198
}
204
199
},
205
200
methods: {
206
-
// index: item index
207
-
// data: item data get from itemdata array
208
-
itemprop (index, data) {
209
-
const id = { data }
210
-
const itemProps = getItemProp(id)
201
+
getItemprops (itemIndex) {
202
+
const itemProps = getItemProp(itemIndex)
211
203
return {
212
-
props: itemProps // <item/> will receive prop with itemProps
204
+
props: itemProps // <item/> will render with itemProps.
0 commit comments