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
<Item v-for="(item, index) of items" :item="item" :key="item.id" />
60
-
</virtualList>
58
+
<virtual-list :size="40" :remain="8">
59
+
<item v-for="(item, index) of items" :key="item.id" />
60
+
</virtual-list>
61
61
</div>
62
62
</template>
63
63
64
64
<script>
65
-
import Item from '../item.vue'
65
+
import item from '../item.vue'
66
66
import virtualList from 'vue-virtual-scroll-list'
67
67
68
68
export default {
69
-
name: 'demo',
70
69
data () {
71
70
return {
72
71
items: [...]
73
72
}
74
73
},
75
-
components: { Item, virtualList }
74
+
components: { item, 'virtual-list': virtualList }
76
75
}
77
76
</script>
78
77
```
79
78
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.
81
79
82
80
#### Using by script include:
83
81
@@ -107,9 +105,9 @@ new Vue({
107
105
108
106
## Notice
109
107
110
-
*List `<Item/>` component or DOM frag using`v-for`must designate the `:key` property.
108
+
*Must assign the `:key` property on `<item>` component or DOM frag with`v-for`directive.
111
109
112
-
* Consider use `box-sizing: border-box;` on `<Item/>` if you want absolutely correct scroll height.
110
+
* Consider use `box-sizing: border-box` on `<item>` if you want absolutely correct scroll height.
113
111
114
112
115
113
## Props type
@@ -118,30 +116,30 @@ new Vue({
118
116
119
117
*Prop* | *Type* | *Required* | *Description* |
120
118
:--- | :--- | :--- | :--- |
121
-
| size | Number | ✓ | Each list item height, in variable height mode, this prop just use to calculate the virtual-list viewport height. |
119
+
| size | Number | ✓ | Each list item height, in variable height mode, this prop just use to calculate the virtual-list outside container viewport height. |
122
120
| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (size × remian). |
123
121
| 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. |
124
122
| 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. |
125
123
| 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. |
126
124
| 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
125
| 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)|
126
+
| wclass | String | * | Default value is an empty string, the virtual-list item wrapper element class, if assign this prop, you better **not** to change it's [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model).|
129
127
| totop | Function | * | Called when virtual-list is scrolled to top, no param. |
130
128
| tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. |
131
129
| onscroll | Function | * | Called when virtual-list is scrolling, param: `(e, { offset, offsetAll, start, end })`. |
132
130
| variable | Function or Boolean | * | For using virtual-list with variable height 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. |
133
131
134
132
### About variable height
135
133
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.
134
+
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 cache, refer to [variable example](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/variable/variable.vue#L1) source for detail.
137
135
138
136
If you are using `variable` assign by `Boolean`, **do not** set inline style height inside `<item/>` component, you must set inline style height on `<item/>` component outside directly, such as:
0 commit comments