最近看了vueuse的useVirtualList的实现方式,发现虚拟滚动效果不错,就尝试着同样的写法改成react版本。
虚拟列表主要包含三部分组成,示意图如下:
定义一个 useVirtualList 的 hook 需要接收两个参数,一是接收所有的数据,二是定义一些配置参数;需要返回的四个参数,一是当前加载的列表,二是获取容器的 ref 和容器滚动事件,三是快速定位的方法,四是内层容器的样式。基本的代码结构如下:
export type UseVirtualListOptions = {
// 如果是每条数据的高度相同为number 否则通过方法计算高度
itemHeight: number | ((index: number) => number);
overscan?: number;
};
export const useVirtualList = (
list: AllItems[],
options: UseVirtualListOptions
): UseVirtualListReturn => {
const containerRef = useRef(null);
const [currentList, setCurrentList] = useState<CurrentList[]>([]);
const [wrapperStyle, setWrapperStyle] = useState({
width: "100%",
height: "0px",
marginTop: "0px",
});
return {
list: currentList,
containerProps: {
ref: containerRef,
onScroll: () => {},
},
scrollTop,
wrapperStyle,
};
};
因为需要容器的高度和滚动距离来计算加载的内容,因此需要在 dom 挂载完成后执行。
1、计算容器的的高度能显示的数据
如果 itemHeight 类型为 number,则可以通过容器高度 / itemHeight 来计算容器能显示多少条数据,否则需要把上一次开始索引作为起始值,预估滚动之后能够在可视区域显示多少数据。
const getViewCapacity = (containerHeight: number) => {
if (typeof itemHeight === "number") {
return Math.ceil(containerHeight / itemHeight);
}
let sum = 0;
let capacity = 0;
const { start = 0 } = state;
console.log(start);
for (let i = start; i < list.length; i++) {
const height = itemHeight(i);
sum += height;
if (sum >= containerHeight) {
capacity = i;
break;
}
}
return capacity - start;
};
2、计算滚动偏移的数据量
如果 itemHeight 类型为 number,则可以通过容器高度 / itemHeight 来计算滚动偏移的数据量,否则需要对滚动偏移的 dom 高度进行累加,计算出偏移的数据量。
const getOffset = (scrollTop: number) => {
if (typeof itemHeight === "number") {
return Math.floor(scrollTop / itemHeight) + 1;
}
let sum = 0;
let offset = 0;
for (let i = 0; i < list.length; i++) {
const height = itemHeight(i);
sum += height;
if (sum >= scrollTop) {
offset = i;
break;
}
}
return offset + 1;
};
3、计算滚动时需要加载的数据
需要加载的数据开始位置 = 滚动偏移量 - 预加载的数量
需要加载的数据结束位置 = 滚动偏移量 + 可视区域显示数据量 + 预加载数据量
如果开始位置 < 0 则从 0 开始,结束位置大于总数组长度,则结束位置为总数据的长度
const from = offset - overscan;
const to = offset + viewCapacity + overscan;
state.start = from < 0 ? 0 : from;
state.end = to > list.length ? list.length : to;
setCurrentList(() => {
return list.slice(state.start, state.end).map((ele, index) => ({
data: ele,
index: index + state.start,
}));
});
4、计算列表容器的高度和滚动的高度
列表容器的高度 = 数据长度 * 预估每条数据的高度 - 滚动偏移的高度
因为加载的数据不是每次都从 0 开始,但每次渲染是从顶部开始的,所以滚动到高度大于数据的高度时,数据位于可视区域的上方,此时需要设置 marginTop,让加载的数据显示在可视区域的顶部,但如果总高度不变,数据全部加载完成后,底部会有大面积留白。
const computedWrapperStype = () => {
const offsetTop = getDistanceTop(state.start);
setWrapperStyle({
width: "100%",
height: `${totalHeight() - offsetTop}px`,
marginTop: `${offsetTop}px`,
});
};
5、添加快速定位功能
当在输入框数据要定位的索引值时,可以根据索引值计算出可视区域上方需要偏移的高度,然后重新调用计算需要加载数据开始、结束位置的方法,即可实现快速定位。
const scrollTop = (index: number) => {
if (containerRef.current) {
(containerRef.current as HTMLDivElement).scrollTop = getDistanceTop(index);
calculateRange();
}
};