Skip to content

Commit e01c65a

Browse files
KyLeoHCKyLeoHC
committed
update: support multiple component instance
1 parent b5c7f23 commit e01c65a

File tree

4 files changed

+113
-143
lines changed

4 files changed

+113
-143
lines changed

‎dist/vue-scroll-list.common.js‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,19 @@ var component = {
2121
},
2222
data: function data() {
2323
return {
24-
scrollTop: 0
24+
scrollTop: 0,
25+
start: 0, // start index
26+
end: 0, // end index
27+
total: 0, // all items count
28+
keeps: 0, // number of item keeping in real dom
29+
paddingTop: 0, // all padding of top dom
30+
paddingBottom: 0, // all padding of bottom dom
31+
reserve: 6 // number of reserve dom for pre-render
2532
};
2633
},
2734

28-
delta: { // an extra object helping to calculate
29-
start: 0, // start index
30-
end: 0, // end index
31-
total: 0, // all items count
32-
keeps: 0, // number of item keeping in real dom
33-
paddingTop: 0, // all padding of top dom
34-
paddingBottom: 0, // all padding of bottom dom
35-
reserve: 6 // number of reserve dom for pre-render
36-
},
3735
methods: {
3836
handleScroll: function handleScroll(event) {
39-
console.log(event);
4037
var scrollTop = this.$el.scrollTop;
4138
this.$emit('scrolling', event);
4239
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
@@ -55,11 +52,10 @@ var component = {
5552
findOvers: function findOvers(offset) {
5653
// compute overs by comparing offset with the height of each item
5754
// @todo: need to optimize this searching efficiency
58-
var delta = this.$options.delta;
5955
var overs = 0;
6056
var length = this.heights.length;
6157
var height = this.heights[0];
62-
var topReserve = Math.floor(delta.reserve / 2);
58+
var topReserve = Math.floor(this.reserve / 2);
6359
for (; overs < length; overs++) {
6460
if (offset >= height) {
6561
height += this.heights[overs + 1];
@@ -70,52 +66,51 @@ var component = {
7066
return overs > topReserve - 1 ? overs - topReserve : 0;
7167
},
7268
updateZone: function updateZone(offset) {
73-
var delta = this.$options.delta;
7469
var overs = this.findOvers(offset);
7570

7671
// scroll to top
77-
if (!offset && delta.total) {
72+
if (!offset && this.total) {
7873
this.$emit('toTop');
7974
}
8075

8176
var start = overs || 0;
82-
var end = start + delta.keeps;
77+
var end = start + this.keeps;
8378
var totalHeight = this.heights.reduce(function (a, b) {
8479
return a + b;
8580
});
8681

8782
// scroll to bottom
8883
if (offset && offset + this.$el.clientHeight >= totalHeight) {
89-
start = delta.total - delta.keeps;
90-
end = delta.total - 1;
84+
start = this.total - this.keeps;
85+
end = this.total - 1;
9186
this.$emit('toBottom');
9287
}
9388

94-
delta.start = start;
95-
delta.end = end;
89+
this.start = start;
90+
this.end = end;
9691

9792
this.$forceUpdate();
9893
},
9994
filter: function filter(slots) {
100-
var delta = this.$options.delta;
95+
var _this = this;
10196

10297
if (!slots) {
10398
slots = [];
104-
delta.start = 0;
99+
this.start = 0;
105100
}
106101

107102
var slotList = slots.filter(function (slot, index) {
108-
return index >= delta.start && index <= delta.end;
103+
return index >= _this.start && index <= _this.end;
109104
});
110-
var topList = this.heights.slice(0, delta.start);
111-
var bottomList = this.heights.slice(delta.end + 1);
112-
delta.total = slots.length;
105+
var topList = this.heights.slice(0, this.start);
106+
var bottomList = this.heights.slice(this.end + 1);
107+
this.total = slots.length;
113108
// consider that the height of item may change in any case
114109
// so we compute paddingTop and paddingBottom every time
115-
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
110+
this.paddingTop = topList.length ? topList.reduce(function (a, b) {
116111
return a + b;
117112
}) : 0;
118-
delta.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
113+
this.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
119114
return a + b;
120115
}) : 0;
121116

@@ -125,11 +120,10 @@ var component = {
125120
beforeMount: function beforeMount() {
126121
if (this.enabled) {
127122
var remains = this.remain;
128-
var delta = this.$options.delta;
129123

130-
delta.start = 0;
131-
delta.end = remains + delta.reserve - 1;
132-
delta.keeps = remains + delta.reserve;
124+
this.start = 0;
125+
this.end = remains + this.reserve - 1;
126+
this.keeps = remains + this.reserve;
133127
}
134128
},
135129
activated: function activated() {
@@ -139,7 +133,6 @@ var component = {
139133
},
140134
render: function render(h) {
141135
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
142-
var delta = this.$options.delta;
143136

144137
return h('div', {
145138
class: {
@@ -156,8 +149,8 @@ var component = {
156149
}, [h('div', {
157150
style: {
158151
'display': 'block',
159-
'padding-top': delta.paddingTop + 'px',
160-
'padding-bottom': delta.paddingBottom + 'px'
152+
'padding-top': this.paddingTop + 'px',
153+
'padding-bottom': this.paddingBottom + 'px'
161154
}
162155
}, showList)]);
163156
}

‎dist/vue-scroll-list.esm.js‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,19 @@ var component = {
1919
},
2020
data: function data() {
2121
return {
22-
scrollTop: 0
22+
scrollTop: 0,
23+
start: 0, // start index
24+
end: 0, // end index
25+
total: 0, // all items count
26+
keeps: 0, // number of item keeping in real dom
27+
paddingTop: 0, // all padding of top dom
28+
paddingBottom: 0, // all padding of bottom dom
29+
reserve: 6 // number of reserve dom for pre-render
2330
};
2431
},
2532

26-
delta: { // an extra object helping to calculate
27-
start: 0, // start index
28-
end: 0, // end index
29-
total: 0, // all items count
30-
keeps: 0, // number of item keeping in real dom
31-
paddingTop: 0, // all padding of top dom
32-
paddingBottom: 0, // all padding of bottom dom
33-
reserve: 6 // number of reserve dom for pre-render
34-
},
3533
methods: {
3634
handleScroll: function handleScroll(event) {
37-
console.log(event);
3835
var scrollTop = this.$el.scrollTop;
3936
this.$emit('scrolling', event);
4037
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormally(scrollTop);
@@ -53,11 +50,10 @@ var component = {
5350
findOvers: function findOvers(offset) {
5451
// compute overs by comparing offset with the height of each item
5552
// @todo: need to optimize this searching efficiency
56-
var delta = this.$options.delta;
5753
var overs = 0;
5854
var length = this.heights.length;
5955
var height = this.heights[0];
60-
var topReserve = Math.floor(delta.reserve / 2);
56+
var topReserve = Math.floor(this.reserve / 2);
6157
for (; overs < length; overs++) {
6258
if (offset >= height) {
6359
height += this.heights[overs + 1];
@@ -68,52 +64,51 @@ var component = {
6864
return overs > topReserve - 1 ? overs - topReserve : 0;
6965
},
7066
updateZone: function updateZone(offset) {
71-
var delta = this.$options.delta;
7267
var overs = this.findOvers(offset);
7368

7469
// scroll to top
75-
if (!offset && delta.total) {
70+
if (!offset && this.total) {
7671
this.$emit('toTop');
7772
}
7873

7974
var start = overs || 0;
80-
var end = start + delta.keeps;
75+
var end = start + this.keeps;
8176
var totalHeight = this.heights.reduce(function (a, b) {
8277
return a + b;
8378
});
8479

8580
// scroll to bottom
8681
if (offset && offset + this.$el.clientHeight >= totalHeight) {
87-
start = delta.total - delta.keeps;
88-
end = delta.total - 1;
82+
start = this.total - this.keeps;
83+
end = this.total - 1;
8984
this.$emit('toBottom');
9085
}
9186

92-
delta.start = start;
93-
delta.end = end;
87+
this.start = start;
88+
this.end = end;
9489

9590
this.$forceUpdate();
9691
},
9792
filter: function filter(slots) {
98-
var delta = this.$options.delta;
93+
var _this = this;
9994

10095
if (!slots) {
10196
slots = [];
102-
delta.start = 0;
97+
this.start = 0;
10398
}
10499

105100
var slotList = slots.filter(function (slot, index) {
106-
return index >= delta.start && index <= delta.end;
101+
return index >= _this.start && index <= _this.end;
107102
});
108-
var topList = this.heights.slice(0, delta.start);
109-
var bottomList = this.heights.slice(delta.end + 1);
110-
delta.total = slots.length;
103+
var topList = this.heights.slice(0, this.start);
104+
var bottomList = this.heights.slice(this.end + 1);
105+
this.total = slots.length;
111106
// consider that the height of item may change in any case
112107
// so we compute paddingTop and paddingBottom every time
113-
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
108+
this.paddingTop = topList.length ? topList.reduce(function (a, b) {
114109
return a + b;
115110
}) : 0;
116-
delta.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
111+
this.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
117112
return a + b;
118113
}) : 0;
119114

@@ -123,11 +118,10 @@ var component = {
123118
beforeMount: function beforeMount() {
124119
if (this.enabled) {
125120
var remains = this.remain;
126-
var delta = this.$options.delta;
127121

128-
delta.start = 0;
129-
delta.end = remains + delta.reserve - 1;
130-
delta.keeps = remains + delta.reserve;
122+
this.start = 0;
123+
this.end = remains + this.reserve - 1;
124+
this.keeps = remains + this.reserve;
131125
}
132126
},
133127
activated: function activated() {
@@ -137,7 +131,6 @@ var component = {
137131
},
138132
render: function render(h) {
139133
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
140-
var delta = this.$options.delta;
141134

142135
return h('div', {
143136
class: {
@@ -154,8 +147,8 @@ var component = {
154147
}, [h('div', {
155148
style: {
156149
'display': 'block',
157-
'padding-top': delta.paddingTop + 'px',
158-
'padding-bottom': delta.paddingBottom + 'px'
150+
'padding-top': this.paddingTop + 'px',
151+
'padding-bottom': this.paddingBottom + 'px'
159152
}
160153
}, showList)]);
161154
}

0 commit comments

Comments
 (0)