我正在使用RV List加载带有自定义格式的大型文档。它有点像魅力,但我遇到了以下两个问题:
我目前在cellmeasurer based on this中设置了一个列表来计算行的动态高度(宽度是固定的)。我设法使用scrollToindex来找到我想要的行,但有些行非常大,我希望能够滚动到行中的特定位置。我知道我需要使用scrollTop这样做,但我不知道如何获取当前行的顶部+行中div的偏移量,以使其正确滚动到正确的位置。
我看到an answer to a similar question发布了以下代码:
<AutoSizer>
{({ width, height }) => (
<CellMeasurer
cellRenderer={({index, isScrolling, style, key }) => SectionRenderer(index, key, style)}
columnCount={1}
rowCount={getSectionCount}
width={width}
>
{({ getRowHeight }) => (
<List
height={height}
rowHeight={getRowHeight}
rowCount={getSectionCount}
rowRenderer={({ index, isScrolling, style, key }) => SectionRenderer(index, key, style)}
overscanRowCount={10}
width={width}
scrollToIndex={scrollToSectionIndex}
/>
)}
</CellMeasurer>
)}
</AutoSizer>
这是我的代码:
b abort
我遇到的另一个问题是,虽然我将文档拆分成块,每个块都以标记结尾,以确保文本流畅(不重叠),由于某种原因,文本中有一些点,单元格测量器忽略行div的最后一行文本的高度导致重叠。我还没有设法找到关于列表中重叠发生位置的一致模式。你有什么指示我可以调试这个问题:例如。单独测量给定的部分并将其与CellMeasurer返回的测量值进行比较?
答案 0 :(得分:1)
你问题的前半部分有点棘手。你可以在内部SizeAndPositionManager
上获得一个hanlde(用于管理行大小)并查询它以获得更精确的偏移信息。最简单的方法是使用cellRangeRenderer
回调,大致如下:
import { defaultCellRangeRenderer, Grid } from 'react-virtualized'
class GridWrapperExample extends Component {
constructor (props, context) {
super(props, context)
this._cellRangeRenderer = this._cellRangeRenderer.bind(this)
}
render () {
return (
<Grid
cellRangeRenderer={this._cellRangeRenderer}
{...this.props}
/>
)
}
_cellRangeRenderer (props) {
this._rowSizeAndPositionManager = props.rowSizeAndPositionManager
return defaultCellRangeRenderer(props)
}
}
我的猜测关于轻微的文本重叠问题是它可能与继承的样式有关。取自the docs:
可以在预期
Grid
(或List
)的上下文之外测量细胞。这意味着它们在测量时不会继承父样式。注意不要依赖继承的样式来影响测量(例如字体大小)。 (有关更多背景信息,请参阅问题352.)如果将边框应用于正在测量其单元格的
box-sizing: border-box
,则某些大小调整设置(例如Grid
)可能会导致轻微差异。因此,建议您避免在使用Grid
的{{1}}上放置边框,而是设置其父容器的样式。 (有关更多背景信息,请参阅问题338.)