react-infinite-loading基于瀏覽器的 React 無限滾動插件

react-infinite-loading

基于瀏覽器的 React 無限滾動插件

安裝

react-infinite-loading 要求 React 15 或更高版本

install --save-dev react-infinite-loading

使用

import Infinite from 'react-infinite-loading';

<Infinite handleLoading={this.handleLoading} loading={this.state.loading}>
  {/* scrolled element */}
</Infinite>

參數

一些控制參數，用在組件的屬性中

Infinite.propTypes = {
  // control the current status. loading = true the animation is displayed and no longer triggers handleLoading event
  loading: PropTypes.bool,
  // whether to display the loading animation
  isLoading: PropTypes.bool,
  // load animation components
  asLoading: PropTypes.node,
  // if true, scroll range as a current component on the contrary scroll range as a window
  elementScroll: PropTypes.bool,
  // set the height of the scroll container, scrollHeight={300} or scrollHeight="calc(100% - 100px)"
  scrollHeight: PropTypes.any.isRequired,
  // trigger handleLoading event threshold
  scrollThreshold: PropTypes.num,
  // scroll to the bottom event
  handleLoading: PropTypes.func,
  // sisplayed content
  children: PropTypes.node
}