# ScrollingLoad

## Usage

* basic use

```js
import { ScrollingLoad } from 'amos-framework';

// Window scroll events

<ScrollingLoad
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
  {/* This is the content you want to load */}
  {items}
</ScrollingLoad>

// DOM scroll events

<div style={{ height:700, overflow:'auto' }}>
  <ScrollingLoad
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
    useWindow={false}
  >
    {items}
  </ScrollingLoad>
</div>

// Custom parent element
<div style={{ height:700, overflow:'auto' }} ref={(ref) => this.scrollParentRef = ref}>
  <div>
    <ScrollingLoad
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader" key={0}>Loading ...</div>}
        useWindow={false}
        getScrollParent={() => this.scrollParentRef}
    >
      {items}
    </ScrollingLoad>
  </div>
</div>
```

### ScrollingLoad 基本使用

---demo
```js
import { ScrollingLoad, Toast, SingleSpin } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      hasMore: true
    };
  }
  componentDidMount() {
    this.getData(res => {
      this.setState({
        data: res.results
      });
    });
  }

  getData = callback => {
    // eslint-disable-next-line no-undef
    fetch('https://randomuser.me/api/?results=5&inc=name,email,phone,nat&noinfo')
      .then(res => res.json())
      .then(data => callback(data));
  };

  loadItems = () => {
    let data = this.state.data;
    this.setState({
      loading: true
    });
    if (data.length > 14) {
      Toast.warning({
        title: '警告',
        content: '滚动加载器已经加载所有数据！'
      });
      this.setState({
        hasMore: false,
        loading: false
      });
      return;
    }
    this.getData(res => {
      data = data.concat(res.results);
      this.setState({
        data,
        loading: false
      });
    });
  };

  render() {
    const items = [];
    this.state.data.map((user, i) => {
      items.push(
        <div className="users" key={i}>
          <p>{user.name.last}</p>
          <p>{user.email}</p>
          <p>{user.phone}</p>
        </div>
      );
    });

    return (
      <div style={{ height: 100, padding: '8px 24px', overflow: 'auto' }}>
        <ScrollingLoad
          initialLoad={false}
          pageStart={0}
          loadMore={this.loadItems}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
          <div className="user-list">
            {items}
            {this.state.loading && this.state.hasMore ? (
              <div style={{ textAlign: 'center' }}>
                <SingleSpin>加载更多</SingleSpin>
              </div>
            ) : (
              <div style={{ textAlign: 'center', padding: '1em 0' }}>没有更多数据</div>
            )}
          </div>
        </ScrollingLoad>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## Props

| params  | type | default | description|
|:----  |:----  |:---- |:----|
| element | Component | div | 组件的名称.|
| hasMore | Boolean | false | 是否有更多项目要加载。如果 `false`，则删除事件侦听器.|
| initialLoad | Boolean | true | 组件是否应加载第一组项.|
| isReverse | Boolean | false | 当用户滚动到可滚动区域的顶部时是否应加载新项.|
| loadMore | Function | - | 当用户请求更多项目时的回调。参数为具体要加载页 `function handleLoadMore(page) { /* load more items here */ }` }|
| loader | Component | - | 加载更多项时要呈现的反应组件。父组件必须具有唯一的 key 属性. |
| pageStart | Number | 0 | 要加载的第一页的页数，默认为 0 ，第一页为 1 .|
| getScrollParent | Function | - | 如果不是 ScrollingLoad 的直接父级，则重写方法返回不同的 Scroll Listener. |
| threshold | Number | 250 | 在将触发对 `loadmore` 调用的项结束之前的距离（以像素为单位）.|
| useCapture | Boolean | false | 已添加事件的 `useCapture` 参数.|
| useWindow | Boolean | true | 向窗口或组件的 `parentnode` 添加滚动事件监听.|