备案网站用户名是什么,在线装修设计平台,标书制作培训机构,东营建设信息网招聘需求背景
Antd 的 select 组件支滑动分页获取后端数据
实现滑动加载数据
定义变量
const allLoadedRef useRefboolean(true); // 是否触底
const [current, setCurrent] useStatenumber(1); // 当前页
const [list, setList] useState([]); // 列表定义…需求背景
Antd 的 select 组件支滑动分页获取后端数据
实现滑动加载数据
定义变量
const allLoadedRef useRefboolean(true); // 是否触底
const [current, setCurrent] useStatenumber(1); // 当前页
const [list, setList] useState([]); // 列表定义方法
const getList async () {try {setLoading(true);// pageSize 最大 100让用户感知不到 分页请求数据// 调用接口// 成功// 结构出后端返回给你的 total赋值totalRef.current total;// 10 为 pageSizeif (current * 10 total) {allLoadedRef.current false;return;}} catch {message.error(请求超时请稍后再试);} finally {setLoading(false);}};监听 current useEffect(() {getList();}, [current]);调用 SelectonPopupScroll{(e) {const { target } e;// clientHeight:客户可见的浏览器显示页面的高度。// scrollTop:滚动条的滑块距离浏览器页面最顶部的距离即滚动条滑动了多少距离。// scrollHeight:返回元素的完整的高度const { clientHeight, scrollTop, scrollHeight } target as any;if (clientHeight parseInt(scrollTop) scrollHeight) {//表示触底if (allLoadedRef.current) setCurrent((op) op 1);}}}onChange{onChange}//遍历渲染 Select.Option//Select
