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 | 是否还有更多的数据 | 为false时next不会触发 |
| 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' }}>
↓ Pull down to refresh
</h3>
}
releaseToRefreshContent={
<h3 style={{ textAlign: 'center' }}>
↑ 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' }}>
↓ Pull down to refresh
</h3>
}
releaseToRefreshContent={
<h3 style={{ textAlign: 'center' }}>
↑ 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
其余的一些属性
| name | type | description |
|---|---|---|
| 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 |