@aaaaaandy/loading-list v1.1.0

该组件基于IntersectionObserver实现了滚动加载的功能，且已经做了兼容处理，可放心使用.

import React from 'react';
import LoadingList from 'loading-list';
import './App.css';

const data = [
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: data,
    }
  }
  
  render () {
    const { list } = this.state;

    return (
        <div className="app-container">
          <LoadingList
              list={list}
              fetchData={this.getData}
          >
            {
              list && list.length > 0 && list.map((item, index) => (
                  <div key={index} className="app-container-li">{ `${item.name}-${item.age}-${index}` }</div>
              ))
            }
          </LoadingList>
        </div>
    )
  }

  getData = () => {
    const localList = this.state.list.concat(data);
    this.setState({ list: localList });
  }
}

export default App;

参数传入