如何使用react-window List + Infinte Loader显示用户当前的索引

Question

当我想告诉我的用户，当他们滚动时，他/她在列表中时，我遇到了这个问题。简而言之，我希望有一个计数器来指示visible Row的当前索引。

这可以通过onItemsRendered来实现。

然而，当使用react-window-infinite-loader时，这个属性是从需要加载的子值中获取的，否则它就会停留在加载状态。

onItemsRendered={onItemsRendered}

Answer 1

在浏览了开发人员的代码后，我发现了onItemsRendered是如何工作的。

它需要visibleStartIndex,visibleStopIndex才能返回正确的状态。因此，要获取当前行并返回正确的状态，请执行以下操作。

<List
        className="List"
        height={200}
        itemCount={1000}
        itemSize={200}
      
        onItemsRendered={({visibleStartIndex,visibleStopIndex})=> {
          
        this.setState({counter: visibleStartIndex+1})
        return onItemsRendered({visibleStartIndex,visibleStopIndex})
        }
      
      }
        
        ref={ref}
        width={300}
      >
        {Row}
      </List>
    )}

此外，下面是一个有效的示例：https://stackblitz.com/edit/react-list-counter