Skip to content

Commit bbca14e

Browse files
tangbctangbc
committed
Merge branch 'master' into test
2 parents f48fa2a + b14c047 commit bbca14e

38 files changed

+1040
-168
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,18 @@ assignees: ''
77

88
---
99

10-
**Describe**
11-
10+
## Describe
1211
A clear and concise description of what the bug is.
1312

14-
15-
**To Reproduce**
16-
13+
## To Reproduce
1714
Steps to reproduce the behavior:
1815
1. Click on '....'
1916
2. Scroll down to '....'
2017
3. See error
2118

19+
## Reproduce demo
20+
Providing a reproduce demo of this bug, that will help me solve the problem more quickly. You can fork by this online demo: https://codesandbox.io/s/live-demo-virtual-list-e1ww1
2221

23-
**Live demo**
24-
25-
Providing a jsfiddle (or other) live demo can reproduce this bug, that will help me solve the problem more quickly.
26-
27-
28-
**Other**
29-
22+
## Other
3023
- Version [e.g. 2.0]
3124
- Browser [e.g. chrome, safari]

‎.github/ISSUE_TEMPLATE/feature_request.md

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@ assignees: ''
77

88
---
99

10-
**Is your feature request related to a problem?**
10+
## Describe the feature request
1111

12-
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
13-
14-
15-
**Describe the feature request**
16-
17-
A clear and concise description of what you want to happen.
12+
A clear and concise description of what you want to happen. Or a clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

‎README.md

Lines changed: 84 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

@@ -45,6 +45,8 @@
4545

4646
https://tangbc.github.io/vue-virtual-scroll-list
4747

48+
https://codesandbox.io/s/live-demo-virtual-list-e1ww1
49+
4850

4951
## What's new in v2.0
5052

@@ -64,8 +66,6 @@ Root component:
6466
<template>
6567
<div>
6668
<virtual-list
67-
:size="60" // You dont know? no problem, just pass a estimate value!
68-
:keeps="30"
6969
:data-key="'uid'"
7070
:data-sources="items"
7171
:data-component="itemComponent"
@@ -126,8 +126,6 @@ More usages or getting start you can refer to these clearly [examples](https://g
126126

127127
| **&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** |
128128
|------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
129-
| `size` | Number | Each item size, you don't have to know the accurate, just simply pass an **estimate** or **average** value. |
130-
| `keeps` | Number | How many items you are expecting the list to keep rendering in the real dom. |
131129
| `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. |
132130
| `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. |
133131
| `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`. |
@@ -139,34 +137,28 @@ More usages or getting start you can refer to these clearly [examples](https://g
139137
<p></p>
140138
<table>
141139
<tr>
142-
<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>
143141
<th>Type</th>
144142
<th>Default</th>
145143
<th>Description</th>
146144
</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>
147151
<tr>
148152
<td><code>extra-props</code></td>
149153
<td>Object</td>
150154
<td>{}</td>
151-
<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>
152156
</tr>
153157
<tr>
154-
<td><code>scroll</code></td>
155-
<td>Event</td>
156-
<td></td>
157-
<td>Emited when scrolling, param <code>(event, range)</code>.</td>
158-
</tr>
159-
<tr>
160-
<td><code>totop</code></td>
161-
<td>Event</td>
162-
<td></td>
163-
<td>Emited when scrolled to top or left, no param.</td>
164-
</tr>
165-
<tr>
166-
<td><code>tobottom</code></td>
167-
<td>Event</td>
168-
<td></td>
169-
<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>
170162
</tr>
171163
</table>
172164
</details>
@@ -185,13 +177,31 @@ More usages or getting start you can refer to these clearly [examples](https://g
185177
<td><code>start</code></td>
186178
<td>Number</td>
187179
<td>0</td>
188-
<td>Setting scroll stay start index.</td>
180+
<td>Setting scroll position stay start index.</td>
189181
</tr>
190182
<tr>
191183
<td><code>offset</code></td>
192184
<td>Number</td>
193185
<td>0</td>
194-
<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>
195205
</tr>
196206
<tr>
197207
<td><code>resized</code></td>
@@ -282,25 +292,53 @@ More usages or getting start you can refer to these clearly [examples](https://g
282292

283293
### Public methods
284294

285-
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):
286-
287-
* `reset()`: reset all state back to initial.
288-
289-
* `scrollToBottom()`: manual set scroll position to bottom.
290-
291-
* `scrollToIndex(index)`: manual set scroll position to a designated index.
292-
293-
* `scrollToOffset(offset)`: manual set scroll position to a designated offset.
294-
295-
* `getSize(id)`: get the designated item size by id (from data-key value).
296-
297-
* `getSizes()`: get the total number of stored (rendered) items.
298-
299-
* `getOffset()`: get current scroll offset.
300-
301-
* `getClientSize()`: get wrapper element client viewport size (width or height).
302-
303-
* `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 <code>data-key</code> 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>
304342

305343

306344
## Attentions

‎dist/index.js

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-scroll-list v2.1.3
2+
* vue-virtual-scroll-list v2.1.5
33
* open source under the MIT license
44
* https://github.com/tangbc/vue-virtual-scroll-list#readme
55
*/
@@ -352,7 +352,7 @@
352352
}, {
353353
key: "getEstimateSize",
354354
value: function getEstimateSize() {
355-
return this.firstRangeAverageSize || this.param.size;
355+
return this.firstRangeAverageSize || this.param.estimateSize;
356356
}
357357
}]);
358358

@@ -363,14 +363,6 @@
363363
* props declaration for default, item and slot component
364364
*/
365365
var VirtualProps = {
366-
size: {
367-
type: Number,
368-
required: true
369-
},
370-
keeps: {
371-
type: Number,
372-
required: true
373-
},
374366
dataKey: {
375367
type: String,
376368
required: true
@@ -383,9 +375,17 @@
383375
type: [Object, Function],
384376
required: true
385377
},
378+
keeps: {
379+
type: Number,
380+
"default": 30
381+
},
386382
extraProps: {
387383
type: Object
388384
},
385+
estimateSize: {
386+
type: Number,
387+
"default": 50
388+
},
389389
rootTag: {
390390
type: String,
391391
"default": 'div'
@@ -445,10 +445,6 @@
445445
footerClass: {
446446
type: String,
447447
"default": ''
448-
},
449-
disabled: {
450-
type: Boolean,
451-
"default": false
452448
}
453449
};
454450
var ItemProps = {
@@ -670,7 +666,8 @@
670666
var shepherd = this.$refs.shepherd;
671667

672668
if (shepherd) {
673-
shepherd.scrollIntoView(false); // check if it's really scrolled to the bottom
669+
var offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop'];
670+
this.scrollToOffset(offset); // check if it's really scrolled to the bottom
674671
// maybe list doesn't render and calculate to last range
675672
// so we need retry in next event loop until it really at bottom
676673

@@ -690,11 +687,10 @@
690687
// ----------- public method end -----------
691688
installVirtual: function installVirtual() {
692689
this.virtual = new Virtual({
693-
size: this.size,
694-
// also could be a estimate value
695690
slotHeaderSize: 0,
696691
slotFooterSize: 0,
697692
keeps: this.keeps,
693+
estimateSize: this.estimateSize,
698694
buffer: Math.round(this.keeps / 3),
699695
// recommend for a third of keeps
700696
uniqueIds: this.getUniqueIdFromDataSources()
@@ -772,7 +768,7 @@
772768
var dataSource = dataSources[index];
773769

774770
if (dataSource) {
775-
if (dataSource[dataKey]) {
771+
if (Object.prototype.hasOwnProperty.call(dataSource, dataKey)) {
776772
slots.push(h(Item, {
777773
props: {
778774
index: index,
@@ -812,8 +808,9 @@
812808
wrapTag = this.wrapTag,
813809
wrapClass = this.wrapClass,
814810
footerClass = this.footerClass,
815-
footerTag = this.footerTag;
816-
var padding = this.isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px");
811+
footerTag = this.footerTag,
812+
isHorizontal = this.isHorizontal;
813+
var padding = isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px");
817814
return h(rootTag, {
818815
ref: 'root',
819816
on: {
@@ -846,7 +843,11 @@
846843
}
847844
}, footer) : null, // an empty element use to scroll to bottom
848845
h('div', {
849-
ref: 'shepherd'
846+
ref: 'shepherd',
847+
style: {
848+
width: isHorizontal ? '0px' : '100%',
849+
height: isHorizontal ? '100%' : '0px'
850+
}
850851
})]);
851852
}
852853
});

0 commit comments

Comments
 (0)