Skip to content

Commit 9caa0f5

Browse files
author
Guillaume Chau
committed
Demo update
1 parent 26d4820 commit 9caa0f5

File tree

5 files changed

+137
-58
lines changed

5 files changed

+137
-58
lines changed

‎docs-src/src/App.vue

Lines changed: 125 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,84 @@
2121
</span>
2222
<span>
2323
<button @mousedown="showScroller = !showScroller">Toggle scroller</button>
24-
<label><input type="checkbox" v-model="scopedSlots" /> Scoped slots</label>
24+
<label><input type="checkbox" v-model="scopedSlots" :disabled="recycleList" /> Scoped slots</label>
25+
<label><input type="checkbox" v-model="recycleList" /> Use recycle list</label>
2526
</span>
2627

2728
</div>
2829
<div class="content" v-if="showScroller">
2930
<div class="wrapper">
30-
<!-- Scoped slots -->
31-
<virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize" emit-update @update="onUpdate">
32-
<template slot-scope="props">
33-
<!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
34-
<tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
35-
<td class="index">
36-
{{props.item.index}}
37-
</td>
38-
<td>
39-
{{props.item.value}} Scoped
40-
</td>
41-
</tr>
42-
<item v-if="props.item.type === 'person'" :item="props.item" :key="props.itemKey"></item>
43-
</template>
44-
</virtual-scroller>
45-
46-
<!-- Renderers -->
47-
<virtual-scroller v-else class="scroller" :item-height="itemHeight" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize" emit-update @update="onUpdate"/>
31+
<template v-if="!recycleList">
32+
<!-- Scoped slots -->
33+
<virtual-scroller
34+
v-if="scopedSlots"
35+
class="scroller"
36+
:item-height="itemHeight"
37+
:items="items"
38+
main-tag="section"
39+
content-tag="table"
40+
:buffer="buffer"
41+
:pool-size="poolSize"
42+
emit-update
43+
@update="onUpdate"
44+
>
45+
<template slot-scope="props">
46+
<!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
47+
<tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
48+
<td class="index">
49+
{{props.item.index}}
50+
</td>
51+
<td>
52+
{{props.item.value}} Scoped
53+
</td>
54+
</tr>
55+
<item v-if="props.item.type === 'person'" :item="props.item" :key="props.itemKey"></item>
56+
</template>
57+
</virtual-scroller>
58+
59+
<!-- Renderers -->
60+
<virtual-scroller
61+
v-else
62+
class="scroller"
63+
:item-height="itemHeight"
64+
:items="items"
65+
:renderers="renderers"
66+
type-field="type"
67+
key-field="index"
68+
main-tag="section"
69+
content-tag="table"
70+
:buffer="buffer"
71+
:pool-size="poolSize"
72+
emit-update
73+
@update="onUpdate"
74+
/>
75+
</template>
76+
77+
<template>
78+
<recycle-list
79+
ref="scroller"
80+
class="scroller"
81+
:items="items"
82+
:item-height="itemHeight"
83+
:buffer="buffer"
84+
>
85+
<template slot-scope="props">
86+
<tr
87+
v-if="props.item.type === 'letter'"
88+
class="letter big"
89+
@click="props.item.height = (props.item.height === 200 ? 300 : 200)"
90+
>
91+
<td class="index">
92+
{{props.item.index}}
93+
</td>
94+
<td class="value">
95+
{{props.item.value}} Scoped
96+
</td>
97+
</tr>
98+
<item v-if="props.item.type === 'person'" :item="props.item"></item>
99+
</template>
100+
</recycle-list>
101+
</template>
48102
</div>
49103
</div>
50104
</div>
@@ -79,6 +133,7 @@ export default {
79133
poolSize: 2000,
80134
enableLetters: true,
81135
updateCount: 0,
136+
recycleList: true,
82137
}),
83138
84139
watch: {
@@ -110,6 +165,20 @@ export default {
110165
},
111166
},
112167
168+
updated () {
169+
if (this._dirty) {
170+
const time = Date.now()
171+
this.updateTime = time - this._time
172+
console.log('update', this.updateTime, 'ms')
173+
this._dirty = false
174+
}
175+
},
176+
177+
mounted () {
178+
this.$nextTick(this.generateItems)
179+
window.scroller = this.$refs.scroller
180+
},
181+
113182
methods: {
114183
generateItems () {
115184
console.log('Generating ' + this.count + ' items...')
@@ -126,19 +195,6 @@ export default {
126195
this.updateCount++
127196
},
128197
},
129-
130-
updated () {
131-
if (this._dirty) {
132-
const time = Date.now()
133-
this.updateTime = time - this._time
134-
console.log('update', this.updateTime, 'ms')
135-
this._dirty = false
136-
}
137-
},
138-
139-
mounted () {
140-
this.$nextTick(this.generateItems)
141-
},
142198
}
143199
</script>
144200

@@ -196,19 +252,38 @@ body {
196252
height: 100%;
197253
}
198254
199-
.item-container {
255+
.item-container,
256+
.item-wrapper {
200257
box-sizing: border-box;
201258
}
202259
203-
.item {
204-
height: 50px;
260+
.item,
261+
.item-view {
205262
cursor: pointer;
206263
user-select: none;
207264
-moz-user-select: none;
208265
-webkit-user-select: none;
209266
}
210267
211-
.item:hover {
268+
.item {
269+
height: 50px;
270+
}
271+
272+
tr, td {
273+
box-sizing: border-box;
274+
}
275+
276+
.item-view tr {
277+
display: flex;
278+
align-items: center;
279+
}
280+
281+
.item-view td {
282+
display: block;
283+
}
284+
285+
.item:hover,
286+
.item-view:hover {
212287
background: #4fc08d;
213288
color: white;
214289
}
@@ -221,14 +296,26 @@ body {
221296
222297
.letter td {
223298
padding: 12px;
299+
}
300+
301+
.item .letter td {
224302
height: 200px;
225-
box-sizing: border-box;
303+
}
304+
305+
.letter.big {
306+
font-weight: normal;
307+
height: 200px;
308+
}
309+
310+
.letter.big .value {
311+
font-size: 120px;
226312
}
227313
228314
.index {
229315
color: rgba(0, 0, 0, 0.2);
230316
width: 55px;
231317
text-align: right;
318+
flex: auto 0 0;
232319
}
233320
234321
table {
@@ -249,5 +336,6 @@ table {
249336
width: 50px;
250337
height: 50px;
251338
margin-right: 12px;
339+
background: grey;
252340
}
253341
</style>

‎docs-src/src/Item.vue

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,19 @@
1919
<script>
2020
export default {
2121
props: ['item'],
22+
23+
created () {
24+
console.log('created')
25+
},
26+
27+
destroyed () {
28+
console.log('destroyed')
29+
},
30+
2231
methods: {
2332
edit () {
2433
this.item.value.name += '#'
2534
},
2635
},
27-
/* beforeCreate () {
28-
let d = 0
29-
for (let i = 0; i < 9999999; i++) {
30-
d++
31-
}
32-
return d
33-
}, */
3436
}
3537
</script>

‎docs-src/src/Letter.vue

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,3 @@ export default {
2626
},
2727
}
2828
</script>
29-
30-
<style scoped>
31-
.letter.big {
32-
font-weight: normal;
33-
height: 200px;
34-
}
35-
36-
.letter.big .value {
37-
font-size: 120px;
38-
}
39-
</style>

‎docs/build.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)