效果图
使用例子
import React from 'react';
import useVirtual from './useVirtual';
const colors = ['#8868ff', '#24cdd0', '#ffc84e', '#fe657f', '#748cfd'];
export default () => {
const [list1, containerProps1, wrapperProps1] = useVirtual({
total: 9996,
height: 280,
itemHeight: 54,
});
const [list, containerProps, wrapperProps] = useVirtual({
total: 9996,
height: 280,
itemHeight: i => (i % 2 === 0 ? 86 : 54),
});
return (
<div>
<Part>Item 定高</Part>
<div {...containerProps1}>
<div {...wrapperProps1}>
{list1.map(({ style, index }) => (
<div
style={{
...style,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: colors[index % colors.length],
borderBottom: '1px solid #e8e8e8',
}}
key={index}
>
{index + 1}
</div>
))}
</div>
</div>
<Space />
<Part>Item 不定高</Part>
<div {...containerProps}>
<div {...wrapperProps}>
{list.map(({ style, index }) => (
<div
style={{
...style,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: colors[index % colors.length],
borderBottom: '1px solid #e8e8e8',
}}
key={index}
>
{index + 1}
</div>
))}
</div>
</div>
</div>
);
};
源码
https://github.com/Lemonreds/react-components/blob/master/src/hooks/useVirtual.js