Skip to content

Commit e5061b3

Browse files
tangbctangbc
committed
Variable height support.
1 parent a1c514f commit e5061b3

File tree

10 files changed

+13623
-249
lines changed

10 files changed

+13623
-249
lines changed

‎examples/build/finite.js

Lines changed: 178 additions & 91 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: 185 additions & 98 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/build/variable-height.js

Lines changed: 12950 additions & 0 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
@@ -2,4 +2,5 @@
22
module.exports = [
33
'finite',
44
'infinite',
5+
'variable-height',
56
]

‎examples/variable-height/getItems.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
function getRandomInt (min, max) {
3+
return parseInt(Math.random() * (max - min + 1)) + min
4+
}
5+
6+
export default function (count, heights = [30, 40, 50, 80, 100, 140, 180]) {
7+
let items = []
8+
let ri = count
9+
let hl = heights.length
10+
11+
while (ri--) {
12+
let index = getRandomInt(0, hl - 1)
13+
items.push({
14+
height: heights[index],
15+
title: `Item # ${count - ri - 1}`
16+
})
17+
}
18+
19+
return items
20+
}

‎examples/variable-height/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 (variable height)</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 variable height.
34+
</h1>
35+
<div class="appWraper">
36+
<div id="app"></div>
37+
</div>
38+
<script src="../build/variable-height.js"></script>
39+
</body>
40+
</html>

‎examples/variable-height/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 VariableDemo from './variable.vue'
3+
4+
Vue.config.devtools = false
5+
Vue.config.productionTip = false
6+
7+
new Vue({
8+
el: '#app',
9+
template: '<VariableDemo />',
10+
components: { VariableDemo }
11+
})

‎examples/variable-height/item.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="item" :style="style">
3+
<span>{{ title }}</span>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
title: String,
11+
height: Number
12+
},
13+
14+
computed: {
15+
style () {
16+
return {
17+
'height': this.height + 'px',
18+
'line-height': this.height + 'px'
19+
}
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<style>
26+
.item {
27+
/* height: 50px; */
28+
/* line-height: 50px; */
29+
padding-left: 20px;
30+
box-sizing: border-box;
31+
border-bottom: 1px solid #eee;
32+
}
33+
</style>

‎examples/variable-height/variable.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div>
3+
<VirtualList :variable="getVariableHeight" :size="50" :remain="6" class="list">
4+
<Item
5+
v-for="(item, index) of items"
6+
:key="index"
7+
:title="item.title"
8+
:height="item.height"
9+
></Item>
10+
</VirtualList>
11+
<div class="source">
12+
<a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/variable-height/variable-height.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+
import getItems from './getItems'
24+
25+
const items = getItems(1000)
26+
27+
export default {
28+
name: 'variable-test',
29+
30+
components: { Item, VirtualList },
31+
32+
data () {
33+
return {
34+
items: items
35+
}
36+
},
37+
38+
methods: {
39+
getVariableHeight (index) {
40+
let targetItem = this.items[index]
41+
return targetItem && targetItem.height || 50
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<style>
48+
.list {
49+
background: #fff;
50+
border-radius: 3px;
51+
border: 1px solid #ddd;
52+
-webkit-overflow-scrolling: touch;
53+
overflow-scrolling: touch;
54+
}
55+
.source {
56+
text-align: center;
57+
padding-top: 20px;
58+
}
59+
.source a {
60+
color: #999;
61+
text-decoration: none;
62+
font-weight: 100;
63+
}
64+
@media (max-width: 640px) {
65+
small {
66+
display: none;
67+
}
68+
}
69+
</style>
70+

0 commit comments

Comments
 (0)