select滑动分页请求数据

拙慕JULY

已于 2024-02-21 19:19:58 修改

阅读量627

点赞数 4

分类专栏：前端经验总结文章标签：前端

于 2024-02-21 16:20:22 首次发布

本文链接：https://blog.csdn.net/weixin_42357865/article/details/136214550

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

经验总结

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在AntDesign(Antd)的select组件中实现滑动分页加载后端数据的功能，利用useState和useEffect钩子以及onPopupScroll和onChange事件处理触底加载更多数据。

摘要由CSDN通过智能技术生成

需求背景

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>