select滑动分页请求数据

拙慕JULY2024-02-22 17:55

需求背景

Antd 的 select 组件支滑动分页获取后端数据

实现滑动加载数据

定义变量

复制代码

const allLoadedRef = useRef<boolean>(true); // 是否触底
const [current, setCurrent] = useState<number>(1); // 当前页
const [list, setList] = useState([]); // 列表

定义方法

复制代码

const getList = async () => {
    try {
      setLoading(true);
      // pageSize 最大 100，让用户感知不到 分页请求数据
      // 调用接口
      // 成功
      // 结构出后端返回给你的 total，赋值
        totalRef.current = total;
        // 10 为 pageSize
        if (current * 10 >= total) {
          allLoadedRef.current = false;
          return;
        }
    } catch {
      message.error('请求超时，请稍后再试！');
    } finally {
      setLoading(false);
    }
  };

监听 current

复制代码

 useEffect(() => {
    getList();
  }, [current]);

调用

复制代码

 <Select
  onPopupScroll={(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>