虚拟滚动列表高度计算不准怎么办？

欧阳莉娜提问于 2026-03-03 19:55:21 阅读 3

优化

我在用 React 实现虚拟滚动时，发现列表项高度不一致，用了 react-window 的 VariableSizeList，但滚动过程中经常出现空白或内容错位。是不是我哪里没设置对？

我试过在 itemSize 里返回固定值没问题，但动态高度就乱了。比如下面这样：

const itemSize = (index) => {
  return contentHeights[index] || 60; // contentHeights 是提前计算好的高度数组
}

但有时候 contentHeights 还没更新完，列表就渲染了，导致高度为 60，后面内容就错位了……有没有靠谱的处理方式？

虚拟滚动长列表优化

我来解答赞 4 收藏

反馈

1 条解答

W″馨冉 Lv1

这玩意儿不会自动监听你的数组变化，你得在高度数据更新完之后手动调用 resetAfterIndex 通知它重新计算布局。我之前是写个 useEffect 监听高度数组，只要变动了就重置一下，像下面这样：

import { VariableSizeList as List } from 'react-window';

import { useRef, useEffect } from 'react';



const MyVirtualList = ({ contentHeights }) => {

  const listRef = useRef();



  const itemSize = (index) => contentHeights[index] || 60;



  // 监听高度数据变化，强制列表重新计算

  useEffect(() => {

    if (listRef.current) {

      listRef.current.resetAfterIndex(0);

    }

  }, [contentHeights]);



  return (

    
      ref={listRef}

      height={500}

      itemCount={contentHeights.length}

      itemSize={itemSize}

      width={300}

    >

      {({ index, style }) => (

        

          Item {index}

        


      )}

    

  );

};

2026-03-04 12:00