无限滚动加载解决方案之虚拟滚动（下）

i++;

}

if (end + 10 > maxEndIndex) return;

updateState(newStart, newEnd, true);

}

// 向上滚动

if (entry.isIntersecting && entry.target.id === “top”) {

const newEnd = end === NODENUM ? NODENUM : (end - 10 > NODENUM ? end - 10 : NODENUM);

const newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);

updateState(newStart, newEnd, false);

}

});

}

封装一个paddingTop和paddingBottom更新的函数，如果有当前的padding值，则取出渲染，如果没有，则保存下当前的paddingTop和paddingBottom。

const updateState = (newStart, newEnd, isDown) => {

if (config.current.setting) return;

config.current.syncStart = newStart;

if (start !== newStart || end !== newEnd) {

config.current.setting = true;

setStart(newStart);

setEnd(newEnd);

const page = ~~(newStart / 10) - 1;

if (isDown) { //向下

newStart !== 0 && !config.current.paddingTopArr[page] && (config.current.paddingTopArr[page] = $downAnchor.current.offsetTop);

// setPaddingTop(check ? config.current.paddingTopArr[page] : $downAnchor.current.offsetTop);

setPaddingTop(config.current.paddingTopArr[page]);

setPaddingBottom(config.current.paddingBottomArr[page] || 0);

}else { //向上

// const newPaddingBottom = $wrap.current.scrollHeight - $upAnchor.current.offsetTop;

const newPaddingBottom = $wrap.current.scrollHeight - $downAnchor.current.offsetTop;

newStart !== 0 && (config.current.paddingBottomArr[page] = newPaddingBottom);

setPaddingTop(config.current.paddingTopArr[page] || 0);

// setPaddingBottom(check ? config.current.paddingBottomArr[page] : newPaddingBottom);

setPaddingBottom(config.current.paddingBottomArr[page]);

}

setTimeout(() => {config.current.setting = false;},0);

}

}

• 白屏问题

在开发过程中发现，数据量非常大的情况下，快速滚动页面，由于api是异步的，导致更新方法触发没跟上，所以需要对滚动事件再做一层的观察，判断是否当前的滚动高度已经更新过了，没更新则通过滚动结束后强行更新，当然，一定要记得对这个滚动事件加一层节流，减少事件触发频率。

• 兼容问题

在safari的兼容问题，可以使用polyfill来解决。

• 整体代码

// index.less

.item {

width: 100vw;

height: 240rpx;