react-infinite-scroll-component 中文文档

react-infinite-scroll-component 中文文档

小遁哥
0.1912020.07.18 22:25:10字数 553阅读 16,064

官网地址:https://github.com/ankeetmaini/react-infinite-scroll-component

记得自己曾经弱弱的发问,为什么上拉加载更多会触发多次。

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>
  );
};

效果如图


 
属性作用注意事项
dataLength 当您上拉时,程序会根据这个值有没有发生变化决定是否触发next 当数据发生变化的间隔非常小时,是会触发多次的,比如快速的把滚动条拖到底
next 用户上拉达到阈值时用于加载更多数据
hasMore 是否还有更多的数据 falsenext不会触发
endMessage 没有更多数据时上拉到底部会显示 需要hasMore 为false
scrollThreshold 上拉时触发next,相当于底部的距离 默认是0.8,您可以设置自己的值,比如200px,则会按照 100%-200px,显然,随着滚动区域越来越高,100%越来越大,200固定不变,意味着越往后您越要上拉的更接近底部才会触发next

在指定区域内触发

只需要使用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>
  );
};

属性作用注意事项
pullDownToRefresh 是否开启下拉刷新,默认为false  
refreshFunction 触发下拉刷新时调用的函数  
pullDownToRefreshContent 未达到下拉阈值显示的内容
releaseToRefreshContent 达到下拉阈值显示的内容  

效果如下

 
Screenshot_20200718_220845_com.chrome.beta.jpg
 
Screenshot_20200718_220851_com.chrome.beta.jpg

其余的一些属性

nametypedescription
children node (list) the data items which you need to scroll.
onScroll function a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
className string add any custom class you want
style object any style which you want to override
hasChildren bool children is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your children is not an array, specify this prop to tell if your items are 0 or more.
initialScrollY number set a scroll y position for the component to render with.
key string the key for the current data set being shown, used when the same component can show different data sets at different times, default=undefined

posted on 2022-11-23 22:49  漫思  阅读(1752)  评论(0编辑  收藏  举报

导航