需求: select的下拉框,后端做了分页,此时前段需要同步加分页
解决思路: 考虑到交互和性能,采用触底请求下一页(无限滚动加载)
代码示例:
import { Select, message } from 'antd';
import React, { useEffect, useState } from 'react';
const App: React.FC = () => {
const [selectArr, setSelectArr] = useState([]); //下拉框数组
const [loading, setLoading] = useState(false); //加载loading
const [hasMore, setHasMore] = useState(true); //是否还有更多数据需要加载
const PAGE_SIZE = 10; //每页数量
const [page, setPage] = useState(1); //当前页,默认第一页开始
//数据处理/下一页/是否继续请求
const getSelectArr = () => {
if (loading || !hasMore) {
return;
}
setLoading(true);
try {
const {success,data,errorMsg}=await getSelectArrApi() //api请求
const errorMsg = null;
if (success) {
setSelectArr((prevData) => [...prevData, ...data]); // 更新数据(eg:第二页和第一页合并数组,第三页和前两页合并...)
setPage(page + 1); //更新为下一个(eg:第一页变成请求第二页,再第三页..,以此类推...)
setHasMore(data.length === PAGE_SIZE); //对比,当返回的新数组长度小于pagesize,则说明,数据已经全部拿到; 反之说明,还有下一页
} else {
message.error(errorMsg);
}
setLoading(false);
} catch (err) {
console.error(err);
}
};
//滚动时操作函数
const handleScroll = (event) => {
//scrollTop:获取或设置一个元素的内容垂直滚动的像素数。
//scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。
//clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
const { scrollTop, scrollHeight, clientHeight } = event.target;
if (scrollHeight - (scrollTop + clientHeight) < 100) {
//滚动加载
getSelectArr();
}
};
useEffect(() => {
getSelectArr();
});
return (
<Select
showSearch
placeholder="选择查询的名称"
optionFilterProp="children"
onChange={(value: string) => console.log(`selected ${value}`)}
onSearch={(value: string) => console.log('search:', value)}
filterOption={(input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}
options={
Array.isArray(selectArr) &&
selectArr?.map((item) => {
return {
key: item.id,
label: item.name,
value: item.id,
};
})
}
virtual={true}
onPopupScroll={(e) => handleScroll(e)}
/>
);
};
export default App;
代码示例讲解文章来源:https://www.toymoban.com/news/detail-519504.html
文章来源地址https://www.toymoban.com/news/detail-519504.html
到了这里,关于select下拉框---无限滚动加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!