1.安装react-virtualized
2.组件:
import { List, AutoSizer } from "react-virtualized";
rowRendererNoraml = ({ index, key, isScrolling, isVisible, style }) => {
// style一定要导入,否则会闪屏
return (
<div key={key} style={style}>
<NormalItem
data={this.props.normalData[index]}
executeId={this.state.executeId}
checkNormalDetail={this.checkNormalDetail}
/>
</div>
);
};
rowRendered = ({ overscanStopIndex }) => {
if (this.state.activeIndex !== overscanStopIndex) {
this.setState({
activeIndex: overscanStopIndex,
});
}
};
rowHeight = () => {
let w =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
let heightItem = Number(0.0366 * w).toFixed(2);
return Number(heightItem);
};
<AutoSizer>
{({ height, width }) => (
<List
width={width}
height={height}
rowCount={this.props.normalData.length}
rowHeight={this.rowHeight}
rowRenderer={this.rowRendererNoraml}
onRowsRendered={() => this.rowRendered}
scrollToIndex={this.props.normalData.length}
/>
)}
</AutoSizer>