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

问题描述

当我想显示用户滚动时，他/她在列表上的那个点时遇到了这个问题。简而言之，我希望有一个计数器来指示可见Row的当前索引。

这可以通过onItemsRendered来实现。

但是，当使用react-window-infinite-loader时，prop是从加载所需的子级值中获取的，否则它会停留在加载状态。

onItemsRendered={onItemsRendered}

解决方法

浏览开发人员的代码后，我发现onItemsRendered的工作原理。

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

<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