Skip to content

Commit 2393631

Browse files
tangbctangbc
committed
Merge branch 'imwtr-memory-saving'
2 parents 4690cb8 + 3bc5a43 commit 2393631

File tree

10 files changed

+15445
-185
lines changed

10 files changed

+15445
-185
lines changed

‎examples/build/finite-m.js‎

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

‎examples/build/finite.js‎

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

‎examples/build/infinite.js‎

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

‎examples/build/variable.js‎

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

‎examples/entries.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
module.exports = [
33
'finite',
4+
'finite-m',
45
'infinite',
56
'variable',
67
]

‎examples/finite-m/finite.vue‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<template>
2+
<div>
3+
<div class="scrollToIndex">
4+
<span>Scroll to index: </span>
5+
<input type="text" v-model.number.lazy="startIndex">
6+
<small>Change and blur to set start index.</small>
7+
</div>
8+
<VirtualList :size="50" :remain="6" :bench="44" class="list" :start="startIndex"
9+
:items="items" :item-component="itemComponent" :item-binding="itemBinding">
10+
</VirtualList>
11+
<div class="source">
12+
<a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/finite/finite.vue#L1">
13+
View this demo source code
14+
</a>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import Item from './item.vue'
21+
import VirtualList from 'vue-virtual-scroll-list'
22+
23+
export default {
24+
name: 'finite-test',
25+
26+
components: { Item, VirtualList },
27+
28+
data () {
29+
return {
30+
itemComponent: Item,
31+
startIndex: 0,
32+
items: ((n) => {
33+
let temp = [];
34+
35+
for (let i = 0; i < n; ++i) {
36+
temp.push(i);
37+
// temp.push({
38+
// id: `id-${i}`,
39+
// num: i
40+
// });
41+
}
42+
43+
return temp;
44+
})(100000)
45+
}
46+
},
47+
48+
methods: {
49+
// simple variable test
50+
// variableHeight() {
51+
// return 45;
52+
// },
53+
54+
itemBinding(item, idx) {
55+
return {
56+
key: item,
57+
props: {
58+
index: item
59+
}
60+
};
61+
62+
// return {
63+
// key: item.id,
64+
// props: {
65+
// index: item.num,
66+
// },
67+
// nativeOn: {
68+
// dblclick: (...args) => {
69+
// console.log(idx, 'dblclick');
70+
// }
71+
// }
72+
// }
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style>
79+
.scrollToIndex {
80+
padding-bottom: 20px;
81+
}
82+
input {
83+
outline: none;
84+
padding: .4em .5em;
85+
width: 55px;
86+
height: 16px;
87+
border-radius: 3px;
88+
border: 1px solid;
89+
border-color: #dddddd;
90+
font-size: 16px;
91+
-webkit-appearance: none;
92+
-moz-appearance: none;
93+
appearance: none;
94+
}
95+
input:focus {
96+
border-color: #6495ed;
97+
}
98+
small {
99+
color: #999;
100+
}
101+
.list {
102+
background: #fff;
103+
border-radius: 3px;
104+
border: 1px solid #ddd;
105+
-webkit-overflow-scrolling: touch;
106+
overflow-scrolling: touch;
107+
}
108+
.source {
109+
text-align: center;
110+
padding-top: 20px;
111+
}
112+
.source a {
113+
color: #999;
114+
text-decoration: none;
115+
font-weight: 100;
116+
}
117+
@media (max-width: 640px) {
118+
small {
119+
display: none;
120+
}
121+
}
122+
</style>
123+

‎examples/finite-m/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue virtual list (finite data)</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<style>
8+
body {
9+
background: #fffaf0;
10+
}
11+
.appWraper {
12+
width: 440px;
13+
margin: 0 auto;
14+
overflow-y: auto;
15+
}
16+
.title {
17+
font-size: 25px;
18+
font-weight: 100;
19+
text-align: center;
20+
}
21+
@media (max-width: 640px) {
22+
.appWraper {
23+
width: 100%;
24+
}
25+
.title {
26+
font-size: 16px;
27+
}
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<h1 class="title">
33+
Vue virtual list, with 100,000 finite data.
34+
</h1>
35+
<div class="appWraper">
36+
<div id="app"></div>
37+
</div>
38+
<script src="../build/finite-m.js"></script>
39+
</body>
40+
</html>

‎examples/finite-m/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
import FiniteDemo from './finite.vue'
3+
4+
Vue.config.devtools = false
5+
Vue.config.productionTip = false
6+
7+
new Vue({
8+
el: '#app',
9+
template: '<FiniteDemo />',
10+
components: { FiniteDemo }
11+
})

‎examples/finite-m/item.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="item">Item # {{ index }}</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
index: Number
9+
}
10+
}
11+
</script>
12+
13+
<style>
14+
.item {
15+
height: 50px;
16+
line-height: 50px;
17+
padding-left: 20px;
18+
border-bottom: 1px solid #eee;
19+
}
20+
</style>

‎index.js‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@
3838
props: {
3939
size: { type: Number, required: true },
4040
remain: { type: Number, required: true },
41+
42+
// replace from vue $slots.default vnodes to pure data set
43+
items: {type: Array, default: () => []},
44+
// for creating vnodes
45+
itemComponent: {type: Object},
46+
// for passing props or events to itemComponent
47+
itemBinding: {type: Function, default: () => {}},
48+
4149
rtag: { type: String, default: 'div' },
4250
wtag: { type: String, default: 'div' },
4351
wclass: { type: String, default: '' },
@@ -214,7 +222,12 @@
214222
if (typeof this.variable === 'function') {
215223
return this.variable(index) || 0
216224
} else {
217-
var slot = this.$slots.default[index]
225+
var slot = !this.itemComponent ? this.$slots.default[index]
226+
// when using itemComponent, it can only get current components height,
227+
// need to be enhanced, or consider using variable-function instead
228+
: this.$children[index] ? this.$children[index].$vnode
229+
: undefined
230+
218231
var style = slot && slot.data && slot.data.style
219232
if (style && style.height) {
220233
var shm = style.height.match(/^(.*)px$/)
@@ -306,12 +319,20 @@
306319
var delta = this.delta
307320
var slots = this.$slots.default
308321

309-
if (!slots) {
310-
slots = []
311-
delta.start = 0
312-
}
322+
if (!this.itemComponent) {
323+
if (!slots) {
324+
slots = []
325+
delta.start = 0
326+
}
313327

314-
delta.total = slots.length
328+
delta.total = slots.length
329+
} else {
330+
if (!this.items.length) {
331+
delta.start = 0
332+
}
333+
334+
delta.total = this.items.length
335+
}
315336

316337
var paddingTop, paddingBottom, allHeight
317338
var hasPadding = delta.total > delta.keeps
@@ -331,9 +352,14 @@
331352
delta.offsetAll = allHeight - this.size * this.remain
332353

333354
var targets = []
355+
334356
for (var i = delta.start; i <= Math.ceil(delta.end); i++) {
335-
targets.push(slots[i])
357+
targets.push(!this.itemComponent ? slots[i]
358+
// create vnode, using custom attrs binder (see example "finite-m")
359+
: this.$createElement(this.itemComponent, this.itemBinding(this.items[i], i) || {})
360+
)
336361
}
362+
337363
return targets
338364
}
339365
},

0 commit comments

Comments
 (0)