Skip to content

Commit c517475

Browse files
AkryumAkryum
committed
Version bump
1 parent b2c5bb3 commit c517475

File tree

5 files changed

+319
-283
lines changed

5 files changed

+319
-283
lines changed

‎dist/vue-virtual-scroller.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-virtual-scroller.esm.js

Lines changed: 158 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ var VirtualScroller = { render: function render() {
186186
}) : [_vm._l(_vm.visibleItems, function (item, index) {
187187
return _vm._t("default", null, { item: item, itemIndex: _vm._startIndex + index, itemKey: _vm.keysEnabled && item[_vm.keyField] || '' });
188188
})]], 2), _vm._v(" "), _vm._t("after-content")])], 2), _vm._v(" "), _vm._t("after-container", [_c('resize-observer', { on: { "notify": _vm.handleResize } })])])], 2);
189-
}, staticRenderFns: [], _scopeId: 'data-v-727d6836',
189+
}, staticRenderFns: [], _scopeId: 'data-v-2b1f2e05',
190190
name: 'virtual-scroller',
191191

192192
components: {
@@ -312,6 +312,42 @@ var VirtualScroller = { render: function render() {
312312
itemHeight: 'setDirty'
313313
},
314314

315+
created: function created() {
316+
this.$_ready = false;
317+
this.$_startIndex = 0;
318+
this.$_oldScrollTop = null;
319+
this.$_oldScrollBottom = null;
320+
this.$_offsetTop = 0;
321+
this.$_height = 0;
322+
this.$_scrollDirty = false;
323+
this.$_updateDirty = false;
324+
325+
var prerender = parseInt(this.prerender);
326+
if (prerender > 0) {
327+
this.visibleItems = this.items.slice(0, prerender);
328+
this.$_length = this.visibleItems.length;
329+
this.$_endIndex = this.$_length - 1;
330+
this.$_skip = true;
331+
} else {
332+
this.$_endIndex = 0;
333+
this.$_length = 0;
334+
this.$_skip = false;
335+
}
336+
},
337+
mounted: function mounted() {
338+
var _this = this;
339+
340+
this.applyPageMode();
341+
this.$nextTick(function () {
342+
_this.updateVisibleItems(true);
343+
_this.$_ready = true;
344+
});
345+
},
346+
beforeDestroy: function beforeDestroy() {
347+
this.removeWindowScroll();
348+
},
349+
350+
315351
methods: {
316352
getScroll: function getScroll() {
317353
var el = this.$el;
@@ -346,111 +382,118 @@ var VirtualScroller = { render: function render() {
346382
}
347383
},
348384
updateVisibleItems: function updateVisibleItems() {
349-
var _this = this;
385+
var _this2 = this;
350386

351387
var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
352388

353-
var l = this.items.length;
354-
var scroll = this.getScroll();
355-
var items = this.items;
356-
var itemHeight = this.itemHeight;
357-
var containerHeight = void 0,
358-
offsetTop = void 0;
359-
if (scroll) {
360-
var startIndex = -1;
361-
var endIndex = -1;
362-
363-
var buffer = parseInt(this.buffer);
364-
var poolSize = parseInt(this.poolSize);
365-
var scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer;
366-
var scrollBottom = Math.ceil(scroll.bottom / poolSize) * poolSize + buffer;
367-
368-
if (!force && (scrollTop === this._oldScrollTop && scrollBottom === this._oldScrollBottom || this._skip)) {
369-
this._skip = false;
370-
return;
371-
} else {
372-
this._oldScrollTop = scrollTop;
373-
this._oldScrollBottom = scrollBottom;
374-
}
375-
376-
// Variable height mode
377-
if (itemHeight === null) {
378-
var heights = this.heights;
379-
var h = void 0;
380-
var a = 0;
381-
var b = l - 1;
382-
var i = ~~(l / 2);
383-
var oldI = void 0;
384-
385-
// Searching for startIndex
386-
do {
387-
oldI = i;
388-
h = heights[i];
389-
if (h < scrollTop) {
390-
a = i;
391-
} else if (i < l && heights[i + 1] > scrollTop) {
392-
b = i;
389+
if (!this.$_updateDirty) {
390+
this.$_updateDirty = true;
391+
this.$nextTick(function () {
392+
_this2.$_updateDirty = false;
393+
394+
var l = _this2.items.length;
395+
var scroll = _this2.getScroll();
396+
var items = _this2.items;
397+
var itemHeight = _this2.itemHeight;
398+
var containerHeight = void 0,
399+
offsetTop = void 0;
400+
if (scroll) {
401+
var startIndex = -1;
402+
var endIndex = -1;
403+
404+
var buffer = parseInt(_this2.buffer);
405+
var poolSize = parseInt(_this2.poolSize);
406+
var scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer;
407+
var scrollBottom = Math.ceil(scroll.bottom / poolSize) * poolSize + buffer;
408+
409+
if (!force && (scrollTop === _this2.$_oldScrollTop && scrollBottom === _this2.$_oldScrollBottom || _this2.$_skip)) {
410+
_this2.$_skip = false;
411+
return;
412+
} else {
413+
_this2.$_oldScrollTop = scrollTop;
414+
_this2.$_oldScrollBottom = scrollBottom;
393415
}
394-
i = ~~((a + b) / 2);
395-
} while (i !== oldI);
396-
i < 0 && (i = 0);
397-
startIndex = i;
398-
399-
// For containers style
400-
offsetTop = i > 0 ? heights[i - 1] : 0;
401-
containerHeight = heights[l - 1];
402-
403-
// Searching for endIndex
404-
for (endIndex = i; endIndex < l && heights[endIndex] < scrollBottom; endIndex++) {}
405-
if (endIndex === -1) {
406-
endIndex = items.length - 1;
407-
} else {
408-
endIndex++;
409-
// Bounds
410-
endIndex > l && (endIndex = l);
411-
}
412-
} else {
413-
// Fixed height mode
414-
startIndex = ~~(scrollTop / itemHeight);
415-
endIndex = Math.ceil(scrollBottom / itemHeight);
416416

417-
// Bounds
418-
startIndex < 0 && (startIndex = 0);
419-
endIndex > l && (endIndex = l);
420-
421-
offsetTop = startIndex * itemHeight;
422-
containerHeight = l * itemHeight;
423-
}
417+
// Variable height mode
418+
if (itemHeight === null) {
419+
var heights = _this2.heights;
420+
var h = void 0;
421+
var a = 0;
422+
var b = l - 1;
423+
var i = ~~(l / 2);
424+
var oldI = void 0;
425+
426+
// Searching for startIndex
427+
do {
428+
oldI = i;
429+
h = heights[i];
430+
if (h < scrollTop) {
431+
a = i;
432+
} else if (i < l && heights[i + 1] > scrollTop) {
433+
b = i;
434+
}
435+
i = ~~((a + b) / 2);
436+
} while (i !== oldI);
437+
i < 0 && (i = 0);
438+
startIndex = i;
439+
440+
// For containers style
441+
offsetTop = i > 0 ? heights[i - 1] : 0;
442+
containerHeight = heights[l - 1];
443+
444+
// Searching for endIndex
445+
for (endIndex = i; endIndex < l && heights[endIndex] < scrollBottom; endIndex++) {}
446+
if (endIndex === -1) {
447+
endIndex = items.length - 1;
448+
} else {
449+
endIndex++;
450+
// Bounds
451+
endIndex > l && (endIndex = l);
452+
}
453+
} else {
454+
// Fixed height mode
455+
startIndex = ~~(scrollTop / itemHeight);
456+
endIndex = Math.ceil(scrollBottom / itemHeight);
457+
458+
// Bounds
459+
startIndex < 0 && (startIndex = 0);
460+
endIndex > l && (endIndex = l);
461+
462+
offsetTop = startIndex * itemHeight;
463+
containerHeight = l * itemHeight;
464+
}
424465

425-
if (force || this._startIndex !== startIndex || this._endIndex !== endIndex || this._offsetTop !== offsetTop || this._height !== containerHeight || this._length !== l) {
426-
this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex);
427-
428-
this.itemContainerStyle = {
429-
height: containerHeight + 'px'
430-
};
431-
this.itemsStyle = {
432-
marginTop: offsetTop + 'px'
433-
};
434-
435-
if (this.delayPreviousItems) {
436-
// Add next items
437-
this.visibleItems = items.slice(this._startIndex, endIndex);
438-
// Remove previous items
439-
this.$nextTick(function () {
440-
_this.visibleItems = items.slice(startIndex, endIndex);
441-
});
442-
} else {
443-
this.visibleItems = items.slice(startIndex, endIndex);
466+
if (force || _this2.$_startIndex !== startIndex || _this2.$_endIndex !== endIndex || _this2.$_offsetTop !== offsetTop || _this2.$_height !== containerHeight || _this2.$_length !== l) {
467+
_this2.keysEnabled = !(startIndex > _this2.$_endIndex || endIndex < _this2.$_startIndex);
468+
469+
_this2.itemContainerStyle = {
470+
height: containerHeight + 'px'
471+
};
472+
_this2.itemsStyle = {
473+
marginTop: offsetTop + 'px'
474+
};
475+
476+
if (_this2.delayPreviousItems) {
477+
// Add next items
478+
_this2.visibleItems = items.slice(_this2.$_startIndex, endIndex);
479+
// Remove previous items
480+
_this2.$nextTick(function () {
481+
_this2.visibleItems = items.slice(startIndex, endIndex);
482+
});
483+
} else {
484+
_this2.visibleItems = items.slice(startIndex, endIndex);
485+
}
486+
487+
_this2.emitUpdate && _this2.$emit('update', startIndex, endIndex);
488+
489+
_this2.$_startIndex = startIndex;
490+
_this2.$_endIndex = endIndex;
491+
_this2.$_length = l;
492+
_this2.$_offsetTop = offsetTop;
493+
_this2.$_height = containerHeight;
494+
}
444495
}
445-
446-
this.emitUpdate && this.$emit('update', startIndex, endIndex);
447-
448-
this._startIndex = startIndex;
449-
this._endIndex = endIndex;
450-
this._length = l;
451-
this._offsetTop = offsetTop;
452-
this._height = containerHeight;
453-
}
496+
});
454497
}
455498
},
456499
scrollToItem: function scrollToItem(index) {
@@ -463,8 +506,8 @@ var VirtualScroller = { render: function render() {
463506
this.$el.scrollTop = scrollTop;
464507
},
465508
setDirty: function setDirty() {
466-
this._oldScrollTop = null;
467-
this._oldScrollBottom = null;
509+
this.$_oldScrollTop = null;
510+
this.$_oldScrollBottom = null;
468511
},
469512
applyPageMode: function applyPageMode() {
470513
if (this.pageMode) {
@@ -482,55 +525,30 @@ var VirtualScroller = { render: function render() {
482525
window.removeEventListener('resize', this.handleResize);
483526
},
484527
handleScroll: function handleScroll() {
485-
this.updateVisibleItems();
528+
var _this3 = this;
529+
530+
if (!this.$_scrollDirty) {
531+
this.$_scrollDirty = true;
532+
requestAnimationFrame(function () {
533+
_this3.$_scrollDirty = false;
534+
_this3.updateVisibleItems();
535+
});
536+
}
486537
},
487538
handleResize: function handleResize() {
488539
this.$emit('resize');
489-
this._ready && this.updateVisibleItems();
540+
this.$_ready && this.updateVisibleItems();
490541
},
491542
handleVisibilityChange: function handleVisibilityChange(isVisible, entry) {
492-
var _this2 = this;
543+
var _this4 = this;
493544

494-
if (this._ready && (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0)) {
545+
if (this.$_ready && (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0)) {
495546
this.$emit('visible');
496547
this.$nextTick(function () {
497-
_this2.updateVisibleItems();
548+
_this4.updateVisibleItems();
498549
});
499550
}
500551
}
501-
},
502-
503-
created: function created() {
504-
this._ready = false;
505-
this._startIndex = 0;
506-
this._oldScrollTop = null;
507-
this._oldScrollBottom = null;
508-
this._offsetTop = 0;
509-
this._height = 0;
510-
var prerender = parseInt(this.prerender);
511-
if (prerender > 0) {
512-
this.visibleItems = this.items.slice(0, prerender);
513-
this._length = this.visibleItems.length;
514-
this._endIndex = this._length - 1;
515-
this._skip = true;
516-
} else {
517-
this._endIndex = 0;
518-
this._length = 0;
519-
this._skip = false;
520-
}
521-
},
522-
mounted: function mounted() {
523-
var _this3 = this;
524-
525-
this.applyPageMode();
526-
this.$nextTick(function () {
527-
_this3.updateVisibleItems(true);
528-
_this3._ready = true;
529-
_this3.$nextTick(_this3.updateVisibleItems);
530-
});
531-
},
532-
beforeDestroy: function beforeDestroy() {
533-
this.removeWindowScroll();
534552
}
535553
};
536554

@@ -540,7 +558,7 @@ function registerComponents(Vue, prefix) {
540558

541559
var plugin = {
542560
// eslint-disable-next-line no-undef
543-
version: "0.10.5",
561+
version: "0.10.6",
544562
install: function install(Vue, options) {
545563
var finalOptions = Object.assign({}, {
546564
installComponents: true,

0 commit comments

Comments
 (0)