处理触底加载更多

src/components/ListCardSkeleton/index.scss

@@ -47,7 +47,7 @@
 }
 
 .location-position {
-  max-width: 66%;
+  max-width: 58%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/container/listContainer/index.tsx

@@ -4,6 +4,7 @@ import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
 import { useReachBottom } from "@tarojs/taro";
 import "./index.scss";
+import { useRef, useEffect } from "react";
 
 const ListContainer = (props) => {
   const {
@@ -14,12 +15,23 @@ const ListContainer = (props) => {
     // recommendList,
     loadMoreMatches,
   } = props;
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
 
   useReachBottom(() => {
     // 加载更多方法
-    loadMoreMatches();
+    timerRef.current = setTimeout(() => {
+      loadMoreMatches();
+    }, 500);
   });
 
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
   if (error) {
     return <ListLoadError reload={reload} />;
   }