Skip to content

Commit 2f5a0e9

Browse files
tangbctangbc
committed
Fixed bottom padding calculate error when no data increase.
1 parent e2ef65a commit 2f5a0e9

File tree

5 files changed

+36
-32
lines changed

5 files changed

+36
-32
lines changed

‎demo/demo.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
:unit="30"
55
:remain="10"
66
:amount="20"
7-
v-on:bottom="onBottom"
7+
v-on:toBottom="onBottom"
88
>
99
<Item v-for="item in items" :item="item" :key="item.id" />
1010
</virtual-list>
11+
12+
<!-- <Item v-for="item in items" :item="item" :key="item.id" /> -->
1113
</div>
1214
</template>
1315

@@ -23,20 +25,22 @@
2325
2426
watch: {
2527
items (list) {
26-
document.title = `Totoal: ${list.length}, Padding: ${(list.length - 10) * 30}`;
28+
document.title = `Totoal: ${list.length}`;
2729
}
2830
},
2931
3032
data () {
3133
return {
32-
items: fetchData()
34+
items: fetchData(100)
3335
}
3436
},
3537
3638
methods: {
3739
onBottom () {
38-
console.log('REQUEST NEXT');
39-
this.items = this.items.concat(fetchData());
40+
// let list = fetchData();
41+
// if (list.length) {
42+
// this.items = this.items.concat(list);
43+
// }
4044
}
4145
}
4246
}

‎demo/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Vue virtual scroll list demo</title>
5+
<title>Vue virtual scroll list</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style type="text/css">
88
* {
@@ -23,6 +23,7 @@
2323
padding: 15px;
2424
border: 1px solid #aaa;
2525
box-sizing: border-box;
26+
overflow-y: auto;
2627
}
2728
</style>
2829
</head>

‎demo/item.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<div class="user">
3-
<ul class="user-list">
4-
<li class="user-item indx">{{ item.indx }}</li>
5-
<li class="user-item name">{{ item.name }}</li>
6-
<li class="user-item date">{{ item.date }}</li>
2+
<div class="list-item">
3+
<ul class="list-item-box">
4+
<li class="index">{{ item.index }}</li>
5+
<li class="name">{{ item.name }}</li>
6+
<li class="date">{{ item.date }}</li>
77
</ul>
88
</div>
99
</template>
@@ -17,23 +17,23 @@
1717
</script>
1818

1919
<style scoped>
20-
.user {
20+
.list-item {
2121
height: 30px;
2222
line-height: 30px;
2323
}
24-
/*.user:nth-child(2n) {
24+
/*.list-item:nth-child(2n) {
2525
background: #efefef;
2626
}
27-
.user:nth-child(2n-1) {
27+
.list-item:nth-child(2n-1) {
2828
background: #d1e3f5;
2929
}*/
30-
.user-list {
30+
.list-item-box {
3131
list-style: none;
3232
}
33-
.user-item {
33+
.list-item-box li {
3434
display: inline-block;
3535
}
36-
.indx {
36+
.index {
3737
width: 50px;
3838
font-weight: bold;
3939
text-align: center;

‎demo/request_mock.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import Mock from 'mockjs';
22

33
let user_count = 1;
44
let request_times = 0;
5-
export function fetchData (count) {
5+
export function fetchData (count = 20, times) {
66
var list = [];
77
let Random = Mock.Random;
88

9-
if (!count) {
10-
count = 20;
9+
if (request_times === times) {
10+
return [];
1111
}
1212

1313
while (count--) {
1414
list.push({
15-
indx: user_count++,
15+
index: user_count++,
1616
name: Random.name(),
1717
date: Random.date()
1818
});

‎src/index.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Vue.component('virtual-list', {
4545

4646
// scroll to top
4747
if (scrollTop === 0) {
48-
this.$emit('top');
48+
this.$emit('toTop');
4949
}
5050

5151
// scroll to bottom
@@ -57,7 +57,7 @@ Vue.component('virtual-list', {
5757
if (delta.direct === 'UP' && scrollTop < delta.padding_top) {
5858
this.showPrev();
5959
}
60-
}, 16, true, true),
60+
}, 10, true, true),
6161

6262
saveDirect (scrollTop) {
6363
let delta = this.$options.delta;
@@ -75,7 +75,7 @@ Vue.component('virtual-list', {
7575

7676
delta.page_type = 'NEXT';
7777
if (delta.total - delta.start_index <= this.amount) {
78-
this.$emit('bottom');
78+
this.$emit('toBottom');
7979
} else {
8080
delta.start_index = delta.start_index + this.amount;
8181
this.$forceUpdate();
@@ -85,7 +85,7 @@ Vue.component('virtual-list', {
8585
showPrev () {
8686
this.$options.delta.page_type = 'PREV';
8787
this.$forceUpdate();
88-
this.$emit('prev');
88+
this.$emit('toPrev');
8989
},
9090

9191
filter (items) {
@@ -114,9 +114,9 @@ Vue.component('virtual-list', {
114114
if (nowStartIndex !== udf) {
115115
delta.start_index = nowStartIndex;
116116
}
117-
118-
delta.padding_top = delta.start_index * this.unit;
119117
}
118+
119+
delta.padding_top = delta.start_index * this.unit;
120120
} else {
121121
// flipping next or first render
122122

@@ -143,11 +143,11 @@ Vue.component('virtual-list', {
143143

144144
// save virtual list new length
145145
delta.total = length;
146-
// all padding pixel, include top and bottom
147-
// except remain and calculate when component update
148-
delta.all_padding = (length - this.remain) * this.unit;
149146
}
150147

148+
// all padding pixel, include top and bottom
149+
// except amount and calculate when component update
150+
delta.all_padding = (length - this.amount) * this.unit;
151151
// padding-top piexl
152152
delta.padding_top = delta.start_index * this.unit;
153153
}
@@ -177,8 +177,7 @@ Vue.component('virtual-list', {
177177

178178
render (createElement) {
179179
let delta = this.$options.delta;
180-
let slots = this.$slots.default;
181-
let showList = this.filter(slots);
180+
let showList = this.filter(this.$slots.default);
182181

183182
return createElement('div', {
184183
'ref': 'container',

0 commit comments

Comments
 (0)