upp

重写子系统/src/pages/A1HomeM/index.module.scss

@@ -120,7 +120,7 @@
         }
       }
 
-      .allInfoTxt {
+      .adm-infinite-scroll {
         width: 100%;
         height: 30px;
         line-height: 30px;

重写子系统/src/pages/A1HomeM/index.tsx

@@ -5,7 +5,7 @@ import { RootState } from "@/store";
 import { A1_APIgetList_M, A1_APIgetSelect } from "@/store/action/A1Home";
 import { Input, Select } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
-import { Image } from "antd-mobile";
+import { Image, InfiniteScroll } from "antd-mobile";
 import { baseURL } from "@/utils/http";
 import imgLoding from "@/assets/img/loading.webp";
 import imgErr from "@/assets/img/IMGerror.jpg";
@@ -28,6 +28,8 @@ function A1HomeM() {
 
   const flagRef = useRef(false);
 
+  const myScroBox = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (!flagRef.current) {
       const dom = myScroBox.current;
@@ -36,6 +38,16 @@ function A1HomeM() {
     dispatch(A1_APIgetList_M(fromObj, flagRef.current));
   }, [dispatch, fromObj]);
 
+  // 上拉加载更多数据
+  const loadMore = useCallback(async () => {
+    if (flagRef.current) return;
+    flagRef.current = true;
+    setFromObj({ ...fromObj, pageNum: fromObj.pageNum + 1 });
+    setTimeout(() => {
+      flagRef.current = false;
+    }, 300);
+  }, [fromObj]);
+
   useEffect(() => {
     dispatch(A1_APIgetSelect());
   }, [dispatch]);
@@ -70,40 +82,6 @@ function A1HomeM() {
     });
   }, []);
 
-  // 监听是否滑倒底部
-  const myScroBox = useRef<HTMLDivElement>(null);
-
-  const scrollFu = useCallback(async () => {
-    const dom = myScroBox.current;
-    if (dom) {
-      const clientHeight = dom.clientHeight;
-      const scrollTop = dom.scrollTop;
-      const scrollHeight = dom.scrollHeight;
-      if (clientHeight + scrollTop === scrollHeight) {
-        console.log("竖向滚动条已经滚动到底部");
-        if (total > list.length) {
-          if (!flagRef.current) {
-            flagRef.current = true;
-            setFromObj({ ...fromObj, pageNum: fromObj.pageNum + 1 });
-            setTimeout(() => {
-              flagRef.current = false;
-            }, 300);
-          }
-        }
-      }
-    }
-  }, [fromObj, list.length, total]);
-
-  useEffect(() => {
-    const dom = myScroBox.current;
-    if (dom) {
-      dom.addEventListener("scroll", scrollFu, true);
-    }
-    return () => {
-      dom?.removeEventListener("scroll", scrollFu, true);
-    };
-  }, [scrollFu]);
-
   // 藏品详情id
   const [goodsId, setGoodsId] = useState(0);
 
@@ -161,10 +139,12 @@ function A1HomeM() {
               <div className="txt">{v.name}</div>
             </div>
           ))}
+          <InfiniteScroll loadMore={loadMore} hasMore={total > list.length} />
+
           {/* 到底了 */}
-          {total === list.length ? (
-            <div className="allInfoTxt">没有更多了...</div>
-          ) : null}
+          {/* {total === list.length ? (
+              <div className="allInfoTxt">没有更多了...</div>
+            ) : null} */}
         </div>
       )}