Отслеживание видимости объектов, отображаемых в окне реакции - PullRequest
Новая
       17

Отслеживание видимости объектов, отображаемых в окне реакции

0 голосов
/ 28 июня 2019

Я искал способ узнать, какой элемент списка виден на экране при использовании окна реакции.

Реквизит isVisible неправильно отображает видимость.

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq

import React from "react";
import { render } from "react-dom";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import TrackVisibility from "react-on-screen";

import "./styles.css";

const Row = ({ index, style, isVisible }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index + " is" + isVisible}
  </div>
);
const RowWrapper = ({ index, style }) => (
  <TrackVisibility>
    <Row index={index} style={style} />
  </TrackVisibility>
);

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {RowWrapper}
      </List>
    )}
  </AutoSizer>
);

render(<Example />, document.getElementById("root"));

Возможно, это связано с кэшированием элементов, но мне было интересно, есть ли другой способ отслеживать видимость элемента

1 Ответ

0 голосов
/ 29 июня 2019

Я понял это самостоятельно.Найдите песочницы с кодом в

DynamicSizeList - https://codesandbox.io/s/piecykreact-window-dynamic-size-list-vertical-pooy2

Перехватывая событие onWheel и сравнивая "вершины" с clientHeight и ListHeight

FixedSizeList - https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq

Также основано на событии onWheel.

Не работает с реакцией на экране .

Если кто-то знает лучший способ сделать это, пожалуйста, ответьте.

...