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'}}>↓ Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style={{textAlign: 'center'}}>↑ 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