官網(wǎng)地址:https://github.com/ankeetmaini/react-infinite-scroll-component

記得自己曾經(jīng)弱弱的發(fā)問，為什么上拉加載更多會觸發(fā)多次。

1 上拉加載更多

默認以body/window為容器

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import InfiniteScroll from 'react-infinite-scroll-component';
export default () => {
  const [list, setList] = useState([]);
  const requestList = () => {
    setTimeout(async () => {
      const response = await request.get('/api/notes/list', {
        params: {
          name: 12,
        },
      });
      setList(list.concat(response.list));
    }, 1000);
  };
  useEffect(() => {
    requestList();
  }, []);
  return (
    <div>
      <InfiniteScroll
        dataLength={list.length}
        next={requestList}
        hasMore={false}
        endMessage={
          <p style={{ textAlign: 'center' }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
        loader={<h4>Loading...</h4>}
      >
        {list.map((item, index) => (
          <div style={{ height: 100 }} key={index}>
            {item.id}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

效果如圖

在指定區(qū)域內(nèi)觸發(fā)

只需要使用height

...
      <InfiniteScroll
      ...
        height={400}
      ...
      >
...

效果

指定滾動的父容器

需要用到scrollableTarget永罚，這時候InfiniteScroll 就沒必要指定height

      <div
        id="scrollableDiv"
        style={{ height: 300, overflow: 'auto' }}
      >
        <InfiniteScroll
          ...
          scrollableTarget="scrollableDiv"
          ...
        >
    ...
      </div>

下拉刷新

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import InfiniteScroll from 'react-infinite-scroll-component';
export default () => {
  const [list, setList] = useState([]);
  const requestList = () => {
    setTimeout(async () => {
      const response = await request.get('/api/notes/list', {
        params: {
          name: 12,
        },
      });
      setList(list.concat(response.list));
    }, 1000);
  };
  useEffect(() => {
    requestList();
  }, []);
  return (
    <InfiniteScroll
      dataLength={list.length} //This is important field to render the next data
      next={requestList}
      hasMore={true}
      loader={<h4>Loading...</h4>}
      refreshFunction={requestList}
      pullDownToRefresh
      pullDownToRefreshThreshold={10}
      pullDownToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8595; Pull down to refresh
        </h3>
      }
      releaseToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8593; Release to refresh
        </h3>
      }
    >
      {list.map((item, index) => (
        <div style={{ height: 100 }} key={index}>
          {item.id}
        </div>
      ))}
    </InfiniteScroll>
  );
};

這個要在移動端看啤呼，PC端我在mac筆記本上用 三指下拉也看到過

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import InfiniteScroll from 'react-infinite-scroll-component';
export default () => {
  const [list, setList] = useState([]);
  const requestList = () => {
    setTimeout(async () => {
      const response = await request.get('/api/notes/list', {
        params: {
          name: 12,
        },
      });
      setList(list.concat(response.list));
    }, 1000);
  };
  useEffect(() => {
    requestList();
  }, []);
  return (
    <InfiniteScroll
      style={{ marginTop: 120 }}
      height={400}
      dataLength={list.length} //This is important field to render the next data
      next={requestList}
      hasMore={true}
      loader={<h4>Loading...</h4>}
      refreshFunction={requestList}
      pullDownToRefresh
      pullDownToRefreshThreshold={30}
      pullDownToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8595; Pull down to refresh
        </h3>
      }
      releaseToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>
          &#8593; Release to refresh
        </h3>
      }
    >
      {list.map((item, index) => (
        <div style={{ height: 100 }} key={index}>
          {item.id}
        </div>
      ))}
    </InfiniteScroll>
  );
};

效果如下

Screenshot_20200718_220845_com.chrome.beta.jpg

Screenshot_20200718_220851_com.chrome.beta.jpg

其余的一些屬性