需求： select的下拉框，后端做了分頁，此時前段需要同步加分頁
解決思路： 考慮到交互和性能，采用觸底請求下一頁（無限滾動加載）

代碼示例：

import { Select, message } from 'antd';
import React, { useEffect, useState } from 'react';

const App: React.FC = () => {
  const [selectArr, setSelectArr] = useState([]); //下拉框數(shù)組
  const [loading, setLoading] = useState(false); //加載loading
  const [hasMore, setHasMore] = useState(true); //是否還有更多數(shù)據(jù)需要加載
  const PAGE_SIZE = 10; //每頁數(shù)量
  const [page, setPage] = useState(1); //當前頁，默認第一頁開始

  //數(shù)據(jù)處理/下一頁/是否繼續(xù)請求
  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]); // 更新數(shù)據(jù)（eg:第二頁和第一頁合并數(shù)組，第三頁和前兩頁合并...）
        setPage(page + 1); //更新為下一個(eg:第一頁變成請求第二頁，再第三頁..，以此類推...)
        setHasMore(data.length === PAGE_SIZE); //對比，當返回的新數(shù)組長度小于pagesize，則說明，數(shù)據(jù)已經(jīng)全部拿到； 反之說明，還有下一頁
      } else {
        message.error(errorMsg);
      }
      setLoading(false);
    } catch (err) {
      console.error(err);
    }
  };

  //滾動時操作函數(shù)
  const handleScroll = (event) => {
    //scrollTop:獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)。
    //scrollHeight:一個元素內(nèi)容高度的度量，包括由于溢出導致的視圖中不可見內(nèi)容。
    //clientHeight:元素內(nèi)部的高度(單位像素)，包含內(nèi)邊距，但不包括水平滾動條、邊框和外邊距。
    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;

代碼示例講解

文章來源地址http://www.zghlxwxcb.cn/news/detail-519504.html

到了這里，關(guān)于select下拉框---無限滾動加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！