Skip to content

Commit fa51b97

Browse files
KyLeoHCKyLeoHC
committed
1.update rollup and rewrite build config;
2.add 'enable' option to disable this plugin;
1 parent 55e6648 commit fa51b97

File tree

9 files changed

+7651
-27
lines changed

9 files changed

+7651
-27
lines changed

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
'use strict';
2+
3+
var component = {
4+
props: {
5+
heights: {
6+
type: Array,
7+
required: true
8+
},
9+
remain: {
10+
type: Number,
11+
default: 10
12+
},
13+
enabled: {
14+
type: Boolean,
15+
default: true
16+
}
17+
},
18+
delta: { // an extra object helping to calculate
19+
start: 0, // start index
20+
end: 0, // end index
21+
total: 0, // all items count
22+
keeps: 0, // number of item keeping in real dom
23+
paddingTop: 0, // all padding of top dom
24+
paddingBottom: 0, // all padding of bottom dom
25+
reserve: 6 // number of reserve dom for pre-render
26+
},
27+
methods: {
28+
handleScroll: function handleScroll(event) {
29+
var scrollTop = this.$el.scrollTop;
30+
31+
this.$emit('scrolling', event);
32+
33+
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormal(scrollTop);
34+
},
35+
updateZoneNormal: function updateZoneNormal(offset) {
36+
// handle the scroll event normally
37+
var scrollHeight = this.$el.scrollHeight;
38+
var clientHeight = this.$el.clientHeight;
39+
if (offset === 0) {
40+
this.$emit('toTop');
41+
} else if (offset + clientHeight + 5 >= scrollHeight) {
42+
this.$emit('toBottom');
43+
}
44+
},
45+
findOvers: function findOvers(offset) {
46+
// compute overs by comparing offset with the height of each item
47+
// @todo: need to optimize this searching efficiency
48+
var delta = this.$options.delta;
49+
var overs = 0;
50+
var length = this.heights.length;
51+
var height = this.heights[0];
52+
var topReserve = Math.floor(delta.reserve / 2);
53+
for (; overs < length; overs++) {
54+
if (offset >= height) {
55+
height += this.heights[overs + 1];
56+
} else {
57+
break;
58+
}
59+
}
60+
return overs > topReserve - 1 ? overs - topReserve : 0;
61+
},
62+
updateZone: function updateZone(offset) {
63+
var delta = this.$options.delta;
64+
var overs = this.findOvers(offset);
65+
66+
// scroll to top
67+
if (!offset && delta.total) {
68+
this.$emit('toTop');
69+
}
70+
71+
var start = overs || 0;
72+
var end = start + delta.keeps;
73+
var totalHeight = this.heights.reduce(function (a, b) {
74+
return a + b;
75+
});
76+
77+
// scroll to bottom
78+
if (offset && offset + this.$el.clientHeight >= totalHeight) {
79+
start = delta.total - delta.keeps;
80+
end = delta.total - 1;
81+
this.$emit('toBottom');
82+
}
83+
84+
delta.start = start;
85+
delta.end = end;
86+
87+
this.$forceUpdate();
88+
},
89+
filter: function filter(slots) {
90+
var delta = this.$options.delta;
91+
92+
if (!slots) {
93+
slots = [];
94+
delta.start = 0;
95+
}
96+
97+
var slotList = slots.filter(function (slot, index) {
98+
return index >= delta.start && index <= delta.end;
99+
});
100+
var topList = this.heights.slice(0, delta.start);
101+
var bottomList = this.heights.slice(delta.end + 1);
102+
delta.total = slots.length;
103+
// consider that the item height may change in any case
104+
// so we compute paddingTop and paddingBottom every time
105+
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
106+
return a + b;
107+
}) : 0;
108+
delta.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
109+
return a + b;
110+
}) : 0;
111+
112+
return slotList;
113+
}
114+
},
115+
beforeMount: function beforeMount() {
116+
if (this.enabled) {
117+
var remains = this.remain;
118+
var delta = this.$options.delta;
119+
120+
delta.start = 0;
121+
delta.end = remains + delta.reserve - 1;
122+
delta.keeps = remains + delta.reserve;
123+
}
124+
},
125+
render: function render(h) {
126+
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
127+
var delta = this.$options.delta;
128+
129+
return h('div', {
130+
class: {
131+
'scroll-container': 1
132+
},
133+
style: {
134+
'display': 'block',
135+
'overflow-y': 'auto',
136+
'height': '100%'
137+
},
138+
on: { // '&' support passive event
139+
'&scroll': this.handleScroll
140+
}
141+
}, [h('div', {
142+
style: {
143+
'display': 'block',
144+
'padding-top': delta.paddingTop + 'px',
145+
'padding-bottom': delta.paddingBottom + 'px'
146+
}
147+
}, showList)]);
148+
}
149+
};
150+
151+
module.exports = component;

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
var component = {
2+
props: {
3+
heights: {
4+
type: Array,
5+
required: true
6+
},
7+
remain: {
8+
type: Number,
9+
default: 10
10+
},
11+
enabled: {
12+
type: Boolean,
13+
default: true
14+
}
15+
},
16+
delta: { // an extra object helping to calculate
17+
start: 0, // start index
18+
end: 0, // end index
19+
total: 0, // all items count
20+
keeps: 0, // number of item keeping in real dom
21+
paddingTop: 0, // all padding of top dom
22+
paddingBottom: 0, // all padding of bottom dom
23+
reserve: 6 // number of reserve dom for pre-render
24+
},
25+
methods: {
26+
handleScroll: function handleScroll(event) {
27+
var scrollTop = this.$el.scrollTop;
28+
29+
this.$emit('scrolling', event);
30+
31+
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormal(scrollTop);
32+
},
33+
updateZoneNormal: function updateZoneNormal(offset) {
34+
// handle the scroll event normally
35+
var scrollHeight = this.$el.scrollHeight;
36+
var clientHeight = this.$el.clientHeight;
37+
if (offset === 0) {
38+
this.$emit('toTop');
39+
} else if (offset + clientHeight + 5 >= scrollHeight) {
40+
this.$emit('toBottom');
41+
}
42+
},
43+
findOvers: function findOvers(offset) {
44+
// compute overs by comparing offset with the height of each item
45+
// @todo: need to optimize this searching efficiency
46+
var delta = this.$options.delta;
47+
var overs = 0;
48+
var length = this.heights.length;
49+
var height = this.heights[0];
50+
var topReserve = Math.floor(delta.reserve / 2);
51+
for (; overs < length; overs++) {
52+
if (offset >= height) {
53+
height += this.heights[overs + 1];
54+
} else {
55+
break;
56+
}
57+
}
58+
return overs > topReserve - 1 ? overs - topReserve : 0;
59+
},
60+
updateZone: function updateZone(offset) {
61+
var delta = this.$options.delta;
62+
var overs = this.findOvers(offset);
63+
64+
// scroll to top
65+
if (!offset && delta.total) {
66+
this.$emit('toTop');
67+
}
68+
69+
var start = overs || 0;
70+
var end = start + delta.keeps;
71+
var totalHeight = this.heights.reduce(function (a, b) {
72+
return a + b;
73+
});
74+
75+
// scroll to bottom
76+
if (offset && offset + this.$el.clientHeight >= totalHeight) {
77+
start = delta.total - delta.keeps;
78+
end = delta.total - 1;
79+
this.$emit('toBottom');
80+
}
81+
82+
delta.start = start;
83+
delta.end = end;
84+
85+
this.$forceUpdate();
86+
},
87+
filter: function filter(slots) {
88+
var delta = this.$options.delta;
89+
90+
if (!slots) {
91+
slots = [];
92+
delta.start = 0;
93+
}
94+
95+
var slotList = slots.filter(function (slot, index) {
96+
return index >= delta.start && index <= delta.end;
97+
});
98+
var topList = this.heights.slice(0, delta.start);
99+
var bottomList = this.heights.slice(delta.end + 1);
100+
delta.total = slots.length;
101+
// consider that the item height may change in any case
102+
// so we compute paddingTop and paddingBottom every time
103+
delta.paddingTop = topList.length ? topList.reduce(function (a, b) {
104+
return a + b;
105+
}) : 0;
106+
delta.paddingBottom = bottomList.length ? bottomList.reduce(function (a, b) {
107+
return a + b;
108+
}) : 0;
109+
110+
return slotList;
111+
}
112+
},
113+
beforeMount: function beforeMount() {
114+
if (this.enabled) {
115+
var remains = this.remain;
116+
var delta = this.$options.delta;
117+
118+
delta.start = 0;
119+
delta.end = remains + delta.reserve - 1;
120+
delta.keeps = remains + delta.reserve;
121+
}
122+
},
123+
render: function render(h) {
124+
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
125+
var delta = this.$options.delta;
126+
127+
return h('div', {
128+
class: {
129+
'scroll-container': 1
130+
},
131+
style: {
132+
'display': 'block',
133+
'overflow-y': 'auto',
134+
'height': '100%'
135+
},
136+
on: { // '&' support passive event
137+
'&scroll': this.handleScroll
138+
}
139+
}, [h('div', {
140+
style: {
141+
'display': 'block',
142+
'padding-top': delta.paddingTop + 'px',
143+
'padding-bottom': delta.paddingBottom + 'px'
144+
}
145+
}, showList)]);
146+
}
147+
};
148+
149+
export default component;

‎dist/vue-scroll-list.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function (global, factory) {
22
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
33
typeof define === 'function' && define.amd ? define(factory) :
4-
(global['vue-scroll-list'] = global['vue-scroll-list'] || {}, global['vue-scroll-list'].js = factory());
4+
(global['vue-scroll-list'] = factory());
55
}(this, (function () { 'use strict';
66

77
var component = {
@@ -13,6 +13,10 @@ var component = {
1313
remain: {
1414
type: Number,
1515
default: 10
16+
},
17+
enabled: {
18+
type: Boolean,
19+
default: true
1620
}
1721
},
1822
delta: { // an extra object helping to calculate
@@ -28,9 +32,19 @@ var component = {
2832
handleScroll: function handleScroll(event) {
2933
var scrollTop = this.$el.scrollTop;
3034

31-
this.updateZone(scrollTop);
32-
3335
this.$emit('scrolling', event);
36+
37+
this.enabled ? this.updateZone(scrollTop) : this.updateZoneNormal(scrollTop);
38+
},
39+
updateZoneNormal: function updateZoneNormal(offset) {
40+
// handle the scroll event normally
41+
var scrollHeight = this.$el.scrollHeight;
42+
var clientHeight = this.$el.clientHeight;
43+
if (offset === 0) {
44+
this.$emit('toTop');
45+
} else if (offset + clientHeight + 5 >= scrollHeight) {
46+
this.$emit('toBottom');
47+
}
3448
},
3549
findOvers: function findOvers(offset) {
3650
// compute overs by comparing offset with the height of each item
@@ -103,20 +117,22 @@ var component = {
103117
}
104118
},
105119
beforeMount: function beforeMount() {
106-
var remains = this.remain;
107-
var delta = this.$options.delta;
120+
if (this.enabled) {
121+
var remains = this.remain;
122+
var delta = this.$options.delta;
108123

109-
delta.start = 0;
110-
delta.end = remains + delta.reserve - 1;
111-
delta.keeps = remains + delta.reserve;
124+
delta.start = 0;
125+
delta.end = remains + delta.reserve - 1;
126+
delta.keeps = remains + delta.reserve;
127+
}
112128
},
113129
render: function render(h) {
114-
var showList = this.filter(this.$slots.default);
130+
var showList = this.enabled ? this.filter(this.$slots.default) : this.$slots.default;
115131
var delta = this.$options.delta;
116132

117133
return h('div', {
118134
class: {
119-
'scroll-container': true
135+
'scroll-container': 1
120136
},
121137
style: {
122138
'display': 'block',

‎example/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<div class="wrapper">
77
<scroll-list :heights="heightList"
88
:remain="10"
9+
:enabled="true"
910
@toTop="onTop"
1011
@toBottom="onBottom"
1112
@scrolling="onScroll">

0 commit comments

Comments
 (0)