在使用带有React自定义滚动条的react虚拟化时出现问题
这是我的鳕鱼:
<Scrollbars
className="custom__scrollbars"
height={ this.state.windowHeight - 54 }
ref="conversationlistscroll"
renderThumbVertical={props => <div {...props} className="c-scrollbar__bar"/>}
renderTrackVertical={props => <div {...props} className="c-scrollbar__track"/>}
renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{display:"none"}}/>}
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{display:"none"}}/>}
autoHide
autoHideTimeout={ 1000 }
autoHideDuration={ 200 }
onScroll={ this.handleScroll }
>
{ this.renderInfiniteList() }
</Scrollbars>
renderInfiniteList() {
const conversations = this.props.conversations || [];
const listStyle = {
overflowX: false,
overflowY: false,
};
return(
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
height={ this.state.windowHeight - 54 }
loadMoreRows={this.handleInfiniteLoad}
rowCount={conversations.length + 1}
>
{({onRowsRendered, registerChild}) => (
<AutoSizer disableHeight>
{({ width }) => (
<List
ref={instance => (this.List = instance)}
onRowsRendered={onRowsRendered}
rowCount={conversations.length + 1}
rowHeight={80}
rowRenderer={this.rowRenderer}
width={width}
height={ this.state.windowHeight - 54 }
style={listStyle}
/>
) }
</AutoSizer>
)}
</InfiniteLoader>
)
}
每次我滚动到底部时,InfiniteLoader都已加载好
,但仅渲染20个第一项 谁能告诉我如何解决这个问题 非常感谢你
对不起,这是handleScroll函数
handleScroll = ({ target }) => {
const { scrollTop, scrollLeft } = target;
const { Grid: grid } = this.List;
grid.handleScrollEvent({ scrollTop, scrollLeft });
}