|
|
|
<template>
|
|
|
|
<div class="recycle-scroll-reveal" v-bind="$attrs" v-on="$listeners">
|
|
|
|
<div class="recycle-scroll-reveal-main">
|
|
|
|
<div class="recycle-scroll-reveal-main" ref="scroll">
|
|
|
|
<div ref="eternal" class="eternal-top">
|
|
|
|
<slot name="eternalTop"></slot>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -46,8 +46,8 @@ export default { |
|
|
|
colsHeight: [],
|
|
|
|
items: [],
|
|
|
|
itemWidth: 0,
|
|
|
|
currentItems: [],
|
|
|
|
noMore: false
|
|
|
|
noMore: false,
|
|
|
|
startIndexs: [0, 0]
|
|
|
|
};
|
|
|
|
|
|
|
|
for (let i = 0; i < this.cols; i++) {
|
|
...
|
...
|
@@ -136,7 +136,6 @@ export default { |
|
|
|
this.$refs.scroll.resize(index);
|
|
|
|
},
|
|
|
|
init() {
|
|
|
|
this.currentItems = [];
|
|
|
|
this.colsHeight = [];
|
|
|
|
this.itemWidth = Math.floor(this.$el.offsetWidth / this.cols);
|
|
|
|
|
|
...
|
...
|
@@ -192,36 +191,40 @@ export default { |
|
|
|
}, i <= lastIndex ? (startCol + i) % this.cols : -1);
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let i = 0; i < this.cols; i++) {
|
|
|
|
let loop = true;
|
|
|
|
let col = this[this.colPrefix + i];
|
|
|
|
let k = col.length - 1;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
for (let i = 0; i < this.cols; i++) {
|
|
|
|
let loop = true;
|
|
|
|
let col = this[this.colPrefix + i];
|
|
|
|
let k = col.length - 1;
|
|
|
|
|
|
|
|
while (loop) {
|
|
|
|
let cur = col[k];
|
|
|
|
while (loop) {
|
|
|
|
let cur = col[k];
|
|
|
|
|
|
|
|
if (!cur || cur.height) {
|
|
|
|
loop = false;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
if (!cur || cur.height) {
|
|
|
|
loop = false;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
let dom = this.$refs[`items${cur.index}`];
|
|
|
|
|
|
|
|
let dom = this.$refs[`items${cur.index}`];
|
|
|
|
try {
|
|
|
|
if (dom && dom[0]) {
|
|
|
|
cur.height = dom[0].offsetHeight;
|
|
|
|
cur.top = dom[0].offsetTop;
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
const message = `cur_${typeof cur}, dom_ ${typeof dom}, column_${i}, index_ ${index}, length_ ${this.items.length}, ${error ? error.message : ''}`;
|
|
|
|
|
|
|
|
try {
|
|
|
|
if (dom && dom[0]) {
|
|
|
|
cur.height = dom[0].offsetHeight;
|
|
|
|
cur.top = dom[0].offsetTop;
|
|
|
|
throw new Error(message);
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
const message = `cur_${typeof cur}, dom_ ${typeof dom}, column_${i}, index_ ${index}, length_ ${this.items.length}, ${error ? error.message : ''}`;
|
|
|
|
|
|
|
|
throw new Error(message);
|
|
|
|
this.$set(this[this.colPrefix + i], k, cur);
|
|
|
|
k--;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$set(this[this.colPrefix + i], k, cur);
|
|
|
|
k--;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
loadItem(item, colIndex) {
|
|
|
|
return new Promise(r => {
|
|
...
|
...
|
@@ -272,37 +275,30 @@ export default { |
|
|
|
let arr = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < this.cols; i++) {
|
|
|
|
arr.push(this.updateColumnCurrentItems (i, top));
|
|
|
|
arr.push(this.updateColumnCurrentItems(i, top));
|
|
|
|
}
|
|
|
|
|
|
|
|
this.currentItems = arr;
|
|
|
|
},
|
|
|
|
updateColumnCurrentItems (index, top) {
|
|
|
|
updateColumnCurrentItems(index, top) {
|
|
|
|
let col = this[this.colPrefix + index];
|
|
|
|
let startIndex = Math.max(0, Math.floor(col.length * top / this.$refs['col'+index][0].offsetHeight) - this.size);
|
|
|
|
let endIndex = col.length;
|
|
|
|
let startIndex = this.startIndexs[index];
|
|
|
|
let hasTopItem = false;
|
|
|
|
|
|
|
|
while (startIndex < endIndex) {
|
|
|
|
if (col[startIndex].top > top) {
|
|
|
|
endIndex = startIndex - 1;
|
|
|
|
for (let i = 0; i < col.length; i++) {
|
|
|
|
if ((i < startIndex - this.size || i > startIndex + this.size) && col[i].height) {
|
|
|
|
this.$set(col[i], 'placeholder', true);
|
|
|
|
} else {
|
|
|
|
this.$set(col[i], 'placeholder', false);
|
|
|
|
}
|
|
|
|
|
|
|
|
startIndex++;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let i = Math.max(0, Math.floor(endIndex - this.size * 2.5)); i < Math.min(this.size * 5, col.length); i++) {
|
|
|
|
let placeholder = Math.abs(i - endIndex) > this.size;
|
|
|
|
|
|
|
|
if (col[i].placeholder !== placeholder) {
|
|
|
|
this.$set(col[i], 'placeholder', placeholder);
|
|
|
|
if (!hasTopItem && col[i].top > top) {
|
|
|
|
startIndex = Math.max(0, i - 1);
|
|
|
|
hasTopItem = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return col[endIndex];
|
|
|
|
this.startIndexs[index] = startIndex;
|
|
|
|
},
|
|
|
|
_updateList() {
|
|
|
|
const scrollTop = this.$el.scrollTop;
|
|
|
|
const heights = this.$el.offsetHeight;
|
|
|
|
const heights = this.$refs.scroll.offsetHeight;
|
|
|
|
|
|
|
|
// trigger load
|
|
|
|
if (scrollTop + this.$el.offsetHeight > heights - this.offset) {
|
...
|
...
|
|
