千锋Python-晨晨Python：一个简洁且有趣的无限下拉方案( 二 )

1、最开始渲染的是数组中序号为 0 - 19 的元素，即此时对应的 firstIndex 为 0；
2、当序号为 19 的元素（即上一步的 lastItem ）进入视窗时，我们就会往后渲染 10 个元素，即渲染序号为 10 - 29 的元素，那么此时的 firstIndex 为 10；
3、下一次就是，当序号为 29 的元素进入视窗时，继续往后渲染 10个元素，即渲染序号为 20 - 39 的元素，那么此时的 firstIndex 为 20 ，以此类推。。。

// 我们对原先的 firstIndex 做了缓存
const { currentIndex } = this.domDataCache;
// 以全部容器内所有元素的一半作为每一次渲染的增量
const increment = Math.floor(this.listSize / 2);
let firstIndex;
if (isScrollDown) {
// 向下滚动时序号增加
firstIndex = currentIndex + increment;
} else {
// 向上滚动时序号减少
firstIndex = currentIndex - increment;
}
总体来说，更新 firstIndex ，是为了根据页面的滚动情况，知道接下来哪些数据应该被获取、渲染。
3、根据上述序号，获取对应数据元素，列表重新渲染成新的内容
const renderFunction = (firstIndex) => {
// offset = firstIndex, limit = 10 => getData
// getData Done => new dataItems => render DOM
【千锋Python-晨晨Python：一个简洁且有趣的无限下拉方案】};
这一部分就是根据 firstIndex 查询数据，然后将目标数据渲染到页面上即可。
4、padding 调整，模拟滚动实现
既然数据的更新以及 DOM 元素的更新我们已经实现了，那么无限下拉的效果以及滚动的体验，我们要如何实现呢？
想象一下，抛开一切，最原始最直接最粗暴的方式无非就是我们再又获取了 10 个新的数据元素之后，再塞 10 个新的 DOM 元素到页面中去来渲染这些数据。
但此时，对比上面这个粗暴的方案，我们的方案是：这 10个新的数据元素，我们用原来已有的 DOM 元素去渲染，替换掉已经离开视窗、不可见的数据元素；而本该有更多 DOM 元素进一步撑开容器高度的部分，我们用 padding 填充来模拟实现。

本文插图

向下滚动

// padding的增量 = 每一个item的高度 x 新的数据项的数目
const remPaddingsVal = itemHeight * (Math.floor(this.listSize / 2));
if (isScrollDown) {
// paddingTop新增，填充顶部位置
newCurrentPaddingTop = currentPaddingTop + remPaddingsVal;
if (currentPaddingBottom === 0) {
newCurrentPaddingBottom = 0;
} else {
// 如果原来有paddingBottom则减去，会有滚动到底部的元素进行替代
newCurrentPaddingBottom = currentPaddingBottom - remPaddingsVal;
}
}

本文插图

向上滚动

// padding的增量 = 每一个item的高度 x 新的数据项的数目
const remPaddingsVal = itemHeight * (Math.floor(this.listSize / 2));
if (!isScrollDown) {
// paddingBottom新增，填充底部位置
newCurrentPaddingBottom = currentPaddingBottom + remPaddingsVal;
if (currentPaddingTop === 0) {
newCurrentPaddingTop = 0;
} else {
// 如果原来有paddingTop则减去，会有滚动到顶部的元素进行替代