Skip to content

Commit 139f445

Browse files
tangbctangbc
committed
Not use $slots in created hook, it’s not support before vue 2.1.9
1 parent 73de5fb commit 139f445

File tree

1 file changed

+68
-76
lines changed

1 file changed

+68
-76
lines changed

‎index.js

Lines changed: 68 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -55,59 +55,43 @@
5555
var height = this.size * this.remain
5656
var bench = this.bench || this.remain
5757
var keeps = this.remain + bench
58-
var slots = this.$slots.default
59-
var total = (slots && slots.length) || 0
6058

6159
this.delta = {
6260
start: start, // start index.
6361
end: start + keeps, // end index.
64-
total: total, // all items count.
6562
keeps: keeps, // nums keeping in real dom.
6663
bench: bench, // nums scroll pass should force update.
64+
total: 0, // all items count, update in render filter.
6765
offset: 0, // cache scrollTop offset.
6866
direct: 'd', // cache scroll direction.
6967
height: height, // container wrapper viewport height.
7068
fireTime: 0, // cache last event fire time avoid compact.
7169
paddingTop: 0, // container wrapper real padding-top.
7270
paddingBottom: 0, // container wrapper real padding-bottom.
7371
varCache: {}, // cache variable index height and padding offset.
74-
averageSize: 0, // average/estimate item height before variable be calculated.
75-
lastCalcIndex: 0 // last calculated variable height/offset index, always increase.
72+
varAverSize: 0, // average/estimate item height before variable be calculated.
73+
varLastCalcIndex: 0 // last calculated variable height/offset index, always increase.
7674
}
7775
},
7876

7977
mounted: function () {
80-
if (this.start && this.validStart(this.start)) {
81-
this.setScrollTop(this.variable ? this.getVarOffset(this.start) : this.start * this.size)
78+
if (this.start) {
79+
var start = this.getZone(this.start).start
80+
this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size)
8281
}
8382
},
8483

8584
watch: {
8685
start: function (index) {
87-
if (!this.validStart(index)) {
88-
return
89-
}
90-
9186
var delta = this.delta
92-
var start, end, scrollTop
93-
var isOver = this.isOverflow(index)
94-
if (isOver) {
95-
var zone = this.getLastZone()
96-
end = zone.end
97-
start = zone.start
98-
scrollTop = delta.total * this.size
99-
} else {
100-
start = index
101-
end = start + delta.keeps
102-
scrollTop = start * this.size
103-
}
87+
var zone = this.getZone(index)
10488

105-
if (this.variable) {
106-
scrollTop = this.getVarOffset(isOver ? delta.total : start)
107-
}
89+
var scrollTop = this.variable
90+
? this.getVarOffset(zone.overflow ? delta.total : zone.start)
91+
: zone.overflow ? delta.total * this.size : zone.start * this.size
10892

109-
delta.end = end
110-
delta.start = start >= this.remain ? start : 0
93+
delta.end = zone.end
94+
delta.start = zone.start >= this.remain ? zone.start : 0
11195

11296
this.$forceUpdate()
11397
Vue2.nextTick(this.setScrollTop.bind(this, scrollTop))
@@ -116,50 +100,46 @@
116100

117101
methods: {
118102
onScroll: function (e) {
119-
var scrollTop = this.$refs.vsl.scrollTop
103+
var delta = this.delta
104+
var offset = this.$refs.vsl.scrollTop
120105

121-
this.updateZone(scrollTop)
106+
delta.direct = delta.offset > offset ? 'u' : 'd'
107+
delta.offset = offset
122108

123-
if (this.onscroll) {
124-
this.onscroll(e, scrollTop)
109+
if (!offset && delta.total) {
110+
this.triggerEvent('totop')
125111
}
126-
},
127112

128-
updateZone: function (offset) {
129-
var delta = this.delta
113+
this.updateZone(offset)
130114

131-
if (!offset && delta.total) {
132-
this.fireEvent('totop')
115+
if (this.onscroll) {
116+
this.onscroll(e, {
117+
end: delta.end,
118+
start: delta.start,
119+
offset: offset
120+
})
133121
}
122+
},
134123

135-
delta.direct = delta.offset > offset ? 'u' : 'd'
136-
delta.offset = offset
137-
124+
// update render zone by moving offset.
125+
updateZone: function (offset) {
138126
var overs
139127
if (this.variable) {
140128
overs = this.getVarOvers(offset)
141129
} else {
142130
overs = Math.floor(offset / this.size)
143131
}
144132

145-
// calculate the start and end by moving items.
146-
var start = overs || 0
147-
var end = overs ? (overs + delta.keeps) : delta.keeps
148-
149-
var isOver = this.isOverflow(start)
150-
if (isOver) {
151-
var zone = this.getLastZone()
152-
end = zone.end
153-
start = zone.start
154-
}
133+
var delta = this.delta
134+
var zone = this.getZone(overs)
155135

156136
// for better performance, if scroll pass items within now bench, do not update.
157-
if (!isOver && (overs > delta.start) && (overs - delta.start <= delta.bench)) {
137+
if (!zone.overflow && (overs > delta.start) && (overs - delta.start <= delta.bench)) {
158138
return
159139
}
160140

161-
delta.end = end
162-
delta.start = start
141+
delta.end = zone.end
142+
delta.start = zone.start
163143
this.$forceUpdate()
164144
},
165145

@@ -175,9 +155,9 @@
175155
middle = low + Math.floor((high - low) / 2)
176156
middleOffset = this.getVarOffset(middle)
177157

178-
// calculate the averageSize at first binary search.
179-
if (!delta.averageSize) {
180-
delta.averageSize = Math.floor(middleOffset / middle)
158+
// calculate the variable average size at first binary search.
159+
if (!delta.varAverSize) {
160+
delta.varAverSize = Math.floor(middleOffset / middle)
181161
}
182162

183163
if (middleOffset === offset) {
@@ -211,8 +191,8 @@
211191
offset += size
212192
}
213193

214-
delta.lastCalcIndex = Math.max(delta.lastCalcIndex, index)
215-
delta.lastCalcIndex = Math.min(delta.lastCalcIndex, delta.total - 1)
194+
delta.varLastCalcIndex = Math.max(delta.varLastCalcIndex, index)
195+
delta.varLastCalcIndex = Math.min(delta.varLastCalcIndex, delta.total - 1)
216196

217197
return offset
218198
},
@@ -223,15 +203,15 @@
223203
return (cache && cache.size) || this.variable(index) || 0
224204
},
225205

226-
// return the paddingBottom when variable height base current zone.
206+
// return the variable paddingBottom base current zone.
227207
getVarPaddingBottom () {
228208
var delta = this.delta
229-
if (delta.total - delta.end <= delta.keeps || delta.lastCalcIndex === delta.total - 1) {
209+
if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === delta.total - 1) {
230210
return this.getVarOffset(delta.total) - this.getVarOffset(delta.end)
231211
} else {
232212
// if unreached last zone or uncalculate real behind offset
233213
// return the estimate paddingBottom avoid too much calculate.
234-
return (delta.total - delta.end) * (delta.averageSize || this.size)
214+
return (delta.total - delta.end) * (delta.varAverSize || this.size)
235215
}
236216
},
237217

@@ -240,32 +220,44 @@
240220
var delta = this.delta
241221
var overflow = (delta.total - delta.keeps > 0) && (start + this.remain >= delta.total)
242222
if (overflow && delta.direct === 'd') {
243-
this.fireEvent('tobottom')
223+
this.triggerEvent('tobottom')
244224
}
245225
return overflow
246226
},
247227

248-
// if overflow range return the last zone.
249-
getLastZone: function () {
250-
return {
251-
end: this.delta.total,
252-
start: this.delta.total - this.delta.keeps
253-
}
254-
},
255-
256-
// fire a props event to parent.
257-
fireEvent: function (event) {
228+
// trigger a props event on parent.
229+
triggerEvent: function (event) {
258230
var now = +new Date()
259231
var delta = this.delta
260232
if (this[event] && now - delta.fireTime > 30) {
233+
this[event]()
261234
delta.fireTime = now
262-
this[event](delta.start, delta.end)
263235
}
264236
},
265237

266-
// check if given start is valid.
267-
validStart: function (start) {
268-
return start === parseInt(start, 10) && (start >= 0 && start < this.delta.total)
238+
// return the right zone info base on start/index.
239+
getZone (index) {
240+
var start, end
241+
var delta = this.delta
242+
243+
index = parseInt(index, 10) || 0
244+
index = index >= delta.total ? (delta.total - 1) : (index < 0 ? 0 : index)
245+
246+
var overflow = this.isOverflow(index)
247+
// if overflow range return the last zone.
248+
if (overflow) {
249+
end = delta.total
250+
start = delta.total - delta.keeps
251+
} else {
252+
start = index
253+
end = start + delta.keeps
254+
}
255+
256+
return {
257+
end: end,
258+
start: start,
259+
overflow: overflow
260+
}
269261
},
270262

271263
// set manual scrollTop.

0 commit comments

Comments
 (0)