反应虚拟化的粘性标题

时间:2016-11-09 15:33:21

标签: reactjs react-virtualized

我在react-virtualized中使用List组件来渲染大量项目。在我的实现中,项目是分段的,我希望部分标题是粘性的,以便当用户向下滚动时当前部分保持可见。从本质上讲,我需要react-virtualized NOT来销毁部分标题,因为滚动位置会发生变化(但会继续破坏其他项目)。现在有办法做到这一点吗?只要他们不是太疯狂,我就会对黑客持开放态度。

2 个答案:

答案 0 :(得分:3)

我们对您有类似的要求 - 我们需要一个支持粘贴标题的列表。我们无法通过反应虚拟化列表/网格来实现这一点,因此我创建了https://github.com/marchaos/react-virtualized-sticky-tree来支持粘性标头。

参见示例here

答案 1 :(得分:1)

如果我正确理解了您的问题,您希望在电子表格中添加粘性标题。您可以使用ScrollSync组件执行此操作,查看demo/docs

以下是docs中显示的例子:

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>
  )
}