Липкие заголовки в реактивной виртуализации

Я использую компонент List в реактивной виртуализации для рендеринга большого количества элементов. В моей реализации элементы разбиты на разделы, и я хочу, чтобы заголовки разделов были закреплены, чтобы текущий раздел оставался видимым, когда пользователи прокручивают страницу вниз. По сути, мне нужно реагировать-виртуализировано, чтобы НЕ уничтожать заголовки разделов при изменении положения прокрутки (но продолжать уничтожать другие элементы). Есть ли способ сделать это прямо сейчас? Я открыт для хаков, если они не слишком сумасшедшие.


reactjs react-virtualized
person Chris    schedule 09.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

У нас к вам были похожие требования — нам нужен секционированный список с поддержкой липких заголовков. Мы не смогли добиться этого с помощью виртуализированных списков/сеток, поэтому я создал https://github.com/marchaos/react-virtualized-sticky-tree, который поддерживает липкие заголовки.

См. пример здесь.

person marchaos    schedule 06.07.2017

arrow_upward
2
arrow_downward

Если я правильно понял ваш вопрос, вы хотели бы иметь липкий заголовок в стиле электронной таблицы. Вы можете сделать это с помощью компонента ScrollSync, взгляните на демо/документы.

Вот пример, отображаемый в документах:

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
  return (
    <ScrollSync>
      {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
        <div className='Table'>
          <div className='LeftColumn'>
            <List
              scrollTop={scrollTop}
              {...props}
            />
          </div>
          <div className='RightColumn'>
            <Grid
              onScroll={onScroll}
              {...props}
            />
          </div>
        </div>
      )}
    </ScrollSync>
  )
}
person Mbrevda    schedule 30.11.2016