Skip to content

Commit 4fd2152

Browse files
tangbctangbc
committed
Make estimate-size and keeps optional
1 parent 0847a63 commit 4fd2152

File tree

4 files changed

+93
-65
lines changed

4 files changed

+93
-65
lines changed

‎README.md

Lines changed: 82 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<a href="https://npmjs.com/package/vue-virtual-scroll-list">
1212
<img alt="NPM version" src="https://img.shields.io/npm/v/vue-virtual-scroll-list.svg"/>
1313
</a>
14-
<a href="https://vuejs.org/">
14+
<!-- <a href="https://vuejs.org/">
1515
<img alt="Vue version" src="https://img.shields.io/badge/vue-%3E=2.3.0-brightgreen.svg"/>
16-
</a>
16+
</a> -->
1717
<a href="http://packagequality.com/#?package=vue-virtual-scroll-list">
1818
<img alt="Package quality" src="https://npm.packagequality.com/shield/vue-virtual-scroll-list.svg">
1919
</a>
@@ -34,7 +34,7 @@
3434

3535
## Advantages
3636

37-
* Tiny, simple structure and very easy to use.
37+
* Only 3 required props, simple and very easy to use.
3838

3939
* Big data list with high render performance and efficient.
4040

@@ -66,8 +66,6 @@ Root component:
6666
<template>
6767
<div>
6868
<virtual-list
69-
:size="60" // You dont know? no problem, just pass a estimate value!
70-
:keeps="30"
7169
:data-key="'uid'"
7270
:data-sources="items"
7371
:data-component="itemComponent"
@@ -128,8 +126,6 @@ More usages or getting start you can refer to these clearly [examples](https://g
128126

129127
| **&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;** | **Type** | **Description** |
130128
|------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
131-
| `size` | Number | Each item size, you don't have to know the accurate, just simply pass an **estimate** or **average** value. |
132-
| `keeps` | Number | How many items you are expecting the list to keep rendering in the real dom. |
133129
| `data-key` | String | The unique key get from `data-sources` in each data object, its value **must be unique** in `data-sources`, it is used for identifying item size. |
134130
| `data-sources` | Array[Object] | The source array built for list, each array data must be an object and has an unique key for `data-key` property. |
135131
| `data-component` | Component | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render prop and named: `source`. |
@@ -141,34 +137,28 @@ More usages or getting start you can refer to these clearly [examples](https://g
141137
<p></p>
142138
<table>
143139
<tr>
144-
<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Props&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
140+
<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Props&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
145141
<th>Type</th>
146142
<th>Default</th>
147143
<th>Description</th>
148144
</tr>
145+
<tr>
146+
<td><code>keeps</code></td>
147+
<td>Number</td>
148+
<td>30</td>
149+
<td>How many items you are expecting the virtual list to keep rendering in the real dom.</td>
150+
</tr>
149151
<tr>
150152
<td><code>extra-props</code></td>
151153
<td>Object</td>
152154
<td>{}</td>
153-
<td>Extra props pass to item component, notice: <code>index</code> and <code>source</code> are both occupied.</td>
155+
<td>Extra props assign to item component that are not in <code>data-sources</code>. Notice: <code>index</code> and <code>source</code> are both occupied inner.</td>
154156
</tr>
155157
<tr>
156-
<td><code>scroll</code></td>
157-
<td>Event</td>
158-
<td></td>
159-
<td>Emited when scrolling, param <code>(event, range)</code>.</td>
160-
</tr>
161-
<tr>
162-
<td><code>totop</code></td>
163-
<td>Event</td>
164-
<td></td>
165-
<td>Emited when scrolled to top or left, no param.</td>
166-
</tr>
167-
<tr>
168-
<td><code>tobottom</code></td>
169-
<td>Event</td>
170-
<td></td>
171-
<td>Emited when scrolled to bottom or right, no param.</td>
158+
<td><code>estimate-size</code></td>
159+
<td>Number</td>
160+
<td>50</td>
161+
<td>The estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is recommended to assign the average that calculate by yourself.</td>
172162
</tr>
173163
</table>
174164
</details>
@@ -187,13 +177,31 @@ More usages or getting start you can refer to these clearly [examples](https://g
187177
<td><code>start</code></td>
188178
<td>Number</td>
189179
<td>0</td>
190-
<td>Setting scroll stay start index.</td>
180+
<td>Setting scroll position stay start index.</td>
191181
</tr>
192182
<tr>
193183
<td><code>offset</code></td>
194184
<td>Number</td>
195185
<td>0</td>
196-
<td>Setting scroll stay offset.</td>
186+
<td>Setting scroll position stay offset.</td>
187+
</tr>
188+
<tr>
189+
<td><code>scroll</code></td>
190+
<td>Event</td>
191+
<td></td>
192+
<td>Emited when scrolling, param <code>(event, range)</code>.</td>
193+
</tr>
194+
<tr>
195+
<td><code>totop</code></td>
196+
<td>Event</td>
197+
<td></td>
198+
<td>Emited when scrolled to top or left, no param.</td>
199+
</tr>
200+
<tr>
201+
<td><code>tobottom</code></td>
202+
<td>Event</td>
203+
<td></td>
204+
<td>Emited when scrolled to bottom or right, no param.</td>
197205
</tr>
198206
<tr>
199207
<td><code>resized</code></td>
@@ -284,25 +292,53 @@ More usages or getting start you can refer to these clearly [examples](https://g
284292

285293
### Public methods
286294

287-
Here are some usefull public methods you can call via [`ref`](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements):
288-
289-
* `reset()`: reset all state back to initial.
290-
291-
* `scrollToBottom()`: manual set scroll position to bottom.
292-
293-
* `scrollToIndex(index)`: manual set scroll position to a designated index.
294-
295-
* `scrollToOffset(offset)`: manual set scroll position to a designated offset.
296-
297-
* `getSize(id)`: get the designated item size by id (from data-key value).
298-
299-
* `getSizes()`: get the total number of stored (rendered) items.
300-
301-
* `getOffset()`: get current scroll offset.
302-
303-
* `getClientSize()`: get wrapper element client viewport size (width or height).
304-
305-
* `getScrollSize()`: get all scroll size (scrollHeight or scrollWidth).
295+
<details>
296+
<summary><strong>Usefull public methods</strong></summary>
297+
<p></p>
298+
<p>You can call these methods via <code><a href="https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements">ref</a></code>:</p>
299+
<table>
300+
<tr>
301+
<th>Method</th>
302+
<th>Description</th>
303+
</tr>
304+
<tr>
305+
<td><code>reset()</code></td>
306+
<td>Reset all state back to initial.</td>
307+
</tr>
308+
<tr>
309+
<td><code>scrollToBottom()</code></td>
310+
<td>Manual set scroll position to bottom.</td>
311+
</tr>
312+
<tr>
313+
<td><code>scrollToIndex(index)</code></td>
314+
<td>Manual set scroll position to a designated index.</td>
315+
</tr>
316+
<tr>
317+
<td><code>scrollToOffset(offset)</code></td>
318+
<td>Manual set scroll position to a designated offset.</td>
319+
</tr>
320+
<tr>
321+
<td><code>getSize(id)</code></td>
322+
<td>Get the designated item size by id (from `data-key` value).</td>
323+
</tr>
324+
<tr>
325+
<td><code>getSizes()</code></td>
326+
<td>Get the total number of stored (rendered) items.</td>
327+
</tr>
328+
<tr>
329+
<td><code>getOffset()</code></td>
330+
<td>Get current scroll offset.</td>
331+
</tr>
332+
<tr>
333+
<td><code>getClientSize()</code></td>
334+
<td>Get wrapper element client viewport size (width or height).</td>
335+
</tr>
336+
<tr>
337+
<td><code>getScrollSize()</code></td>
338+
<td>Get all scroll size (scrollHeight or scrollWidth).</td>
339+
</tr>
340+
</table>
341+
</details>
306342

307343

308344
## Attentions

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,10 @@ const VirtualList = Vue.component('virtual-list', {
150150

151151
installVirtual () {
152152
this.virtual = new Virtual({
153-
size: this.size, // also could be a estimate value
154153
slotHeaderSize: 0,
155154
slotFooterSize: 0,
156155
keeps: this.keeps,
156+
estimateSize: this.estimateSize,
157157
buffer: Math.round(this.keeps / 3), // recommend for a third of keeps
158158
uniqueIds: this.getUniqueIdFromDataSources()
159159
}, this.onRangeChanged)

‎src/props.js

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@
33
*/
44

55
export const VirtualProps = {
6-
size: {
7-
type: Number,
8-
required: true
9-
},
10-
keeps: {
11-
type: Number,
12-
required: true
13-
},
14-
156
dataKey: {
167
type: String,
178
required: true
@@ -24,9 +15,18 @@ export const VirtualProps = {
2415
type: [Object, Function],
2516
required: true
2617
},
18+
19+
keeps: {
20+
type: Number,
21+
default: 30
22+
},
2723
extraProps: {
2824
type: Object
2925
},
26+
estimateSize: {
27+
type: Number,
28+
default: 50
29+
},
3030

3131
rootTag: {
3232
type: String,
@@ -40,7 +40,6 @@ export const VirtualProps = {
4040
type: String,
4141
default: ''
4242
},
43-
4443
direction: {
4544
type: String,
4645
default: 'vertical' // the other value is horizontal
@@ -61,7 +60,6 @@ export const VirtualProps = {
6160
type: Number,
6261
default: 0
6362
},
64-
6563
itemTag: {
6664
type: String,
6765
default: 'div'
@@ -73,7 +71,6 @@ export const VirtualProps = {
7371
itemClassAdd: {
7472
type: Function
7573
},
76-
7774
headerTag: {
7875
type: String,
7976
default: 'div'
@@ -89,11 +86,6 @@ export const VirtualProps = {
8986
footerClass: {
9087
type: String,
9188
default: ''
92-
},
93-
94-
disabled: {
95-
type: Boolean,
96-
default: false
9789
}
9890
}
9991

‎src/virtual.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,6 @@ export default class Virtual {
295295

296296
// get the item estimate size
297297
getEstimateSize () {
298-
return this.firstRangeAverageSize || this.param.size
298+
return this.firstRangeAverageSize || this.param.estimateSize
299299
}
300300
}

0 commit comments

Comments
 (0)