react-infinite-scroll-component 在反应中，一个非常棒的无限滚动组件

使用一个组件，让你所有的无限滚动的痛苦消失，只有4.15kB！Pull Down to Refresh新增功能。一个无限的滚动，实际工作和超级简单的集成！

 

安装
  npm install --save react-infinite-scroll-component

  // in code ES6
  import InfiniteScroll from 'react-infinite-scroll-component';
  // or commonjs
  var InfiniteScroll = require('react-infinite-scroll-component');

 

使用

<InfiniteScroll
  dataLength={items.length} //This is important field to render the next data
  next={fetchData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{textAlign: 'center'}}>
      <b>Yay! You have seen it all</b>
    </p>
  }
  // below props only if you need pull down functionality
  refreshFunction={this.refresh}
  pullDownToRefresh
  pullDownToRefreshContent={
    <h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
  }>
  {items}
</InfiniteScroll>

 

这个InfiniteScroll组件可以通过三种方式使用。

• 为height如果你想要你的道具可滚动内容具有特定高度，提供滚动条以滚动内容并获取更多数据。
• 如果你可滚动内容呈现在已提供溢出滚动条的父元素中，可以将scrollableTarget支持引用DOM元素并使用它的滚动条获取更多数据。
• 而不设置height或scrollableTarget道具，滚动将发生在document.body喜欢Facebook的时间轴卷轴。

 

 

例子

• 使用Reaction(主体/窗口滚动)的无限滚动(永不结束)示例
• https://codesandbox.io/s/yk7637p62z
• 无限滚动至500元素(主体/窗口滚动)
• https://codesandbox.io/s/439v8rmqm0
• 元素中的无限滚动(高度400 px的div)
• https://codesandbox.io/s/w3w89k7x8
• 无限滚动scrollableTarget(可滚动的父元素)
• https://codesandbox.io/s/r7rp40n0zm

API

请转https://github.com/ankeetmaini/react-infinite-scroll-component