Я настраивал компонент VirtualScroll (List) почти целый день, но не повезло.VirtualScroll (List) с динамической высотой прокрутки элемента не гладкой и прыгающей
Я создаю приложение для веб-чата, в котором используется интерактивно-виртуализированный список для отображения сообщений чата. Поскольку сообщение может иметь различное содержимое и разную высоту, я использую меру реакции, чтобы рассчитать высоту элемента и выдать recomputeRowHeights в rowRenderer.
Результат плохой, список VirtuallScroll будет прыгать, когда я остановил прокрутку. Например, когда я прокручивался до половины браузера, я должен видеть середину сообщений, но он всегда внезапно смещает смещение. Пожалуйста, обратите внимание на записанном видео: https://drive.google.com/file/d/0B_W64UoqloIkcm9oQ08xS09Zc1k/view?usp=sharing
Поскольку я использую только список и компонент Autosizer, я только адаптировать нужный файл CSS в моем проекте, который, как `` `
.VirtualScroll {
width: 100%;
outline: none;
}
` ``
Для метода визуализации, я вложенный много гибких компонентов внутри rowRender: Вот код:
`` `
render() {
const inChat = this.context.store.getState().inChat;
const {conversationList} = this.state;
const imgUrl = 'img/builtin-wallpaper-1.jpg';
const backgroundStyle = {
backgroundImage: 'url(' + imgUrl + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'top left'
};
if (inChat.id === this.id && inChat.status === 'FETCHING'){
return (
<Box column center height="80%">
<CircularProgress />
</Box>
);
} else if (inChat.id === this.id && inChat.status === 'FETCHED'){
return (
<Box column flex="1 0 100%" style={backgroundStyle}>
<HorizontalToolBar/>
<AutoSizer disableHeight={true}>
{({ width }) => (
<List
ref={(element) => {this.VirtualScroll = element;}}
className='VirtualScroll'
height={window.innerHeight - toolbarHeight - textAreaHeight}
overscanRowCount={10}
noRowsRenderer={this._noRowsRenderer.bind(this)}
rowCount={conversationList.length}
rowHeight={i => {
return (Measured_Heights[i.index] | 20); // default Height = 58
}}
rowRenderer={this._rowRenderer}
scrollToIndex={undefined} // scroll to latest item
width={width}
/>
)}
</AutoSizer>
<InputControl chatId={this.id} sendChatText={this._sendChatText.bind(this)}/>
</Box>
);
} else {
return null;
}
}
_rowRenderer ({ index, key, style, isScrolling }) {
console.log(Measured_Heights);
const rowData = this._getDatum(index);
// let renderItem;
// console.log('index = ' + index + ' key = ' + key);
if (rowData.type == 'conversation') {
if (rowData.data.type == netModule.TYPE_SYSTEM) {
// system message
return (
<Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
<SystemMessage data={rowData.data}/>
</Measure>
)
}
if (rowData.data.senderId == this.state.selfProfile.username) {
// outgoing message
return (
<Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
<RightMessage
screenWidth={(window.innerWidth - leftToolBarWidth)/2 }
screenHeight={window.innerHeight - toolbarHeight}
data={rowData.data}/>
</Measure>
);
} else {
// incoming message
// append userProfile to left messages
return (
<Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
<LeftMessage
userId={rowData.data.senderId}
userProfile={this.state.groupUserProfiles[rowData.data.senderId]}
screenWidth={(window.innerWidth - leftToolBarWidth)/2 }
screenHeight={window.innerHeight - toolbarHeight}
data={rowData.data}/>
</Measure>
);
}
}
}
`` `
Я прочитал пару документов, которые могут быть Flexbox перехватывать прокрутки события, но даже если я добавил перелив-у: скрытый для вложенного компонента Я не видел этот вопрос исчезают. Вы когда-нибудь видели это неправильное поведение прокрутки с компонентом List раньше?
Любое предложение приветствуется.