首页轮播图问题

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

src/components/GeoMap/marker.js

@@ -25,7 +25,6 @@ export function useMarker(amapRef, map, list) {
 
 export function useMarkerVisible(map, markerListRef, typeId) {
   useEffect(() => {
-    console.log(typeId, markerListRef.current);
     if (!map || !markerListRef.current) return;
 
     markerListRef.current.forEach((marker) => {

src/pages/MonitoringScreen/components/List/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay } from 'swiper';
 import 'swiper/css';
@@ -7,14 +7,32 @@ import Item from './Item';
 import Styles from './style.less';
 
 export default (props) => {
-  // 每次加载 4 个
-  const tm = 4;
   const { title, color, children } = props;
-
+  const swiperRef = useRef();
   const classList = classNames(Styles['list-title'], {
     [Styles['yellow-title']]: color !== 'green',
     [Styles['green-title']]: color === 'green',
   });
+  const initAutoPlay = useCallback(
+    (swiper) => {
+      console.log(swiper);
+      if (!children?.length || children?.length <= 3) {
+        swiper.autoplay.stop();
+      } else {
+        swiper.autoplay.start();
+      }
+    },
+    [children?.length],
+  );
+
+  useEffect(() => {
+    if (swiperRef.current) {
+      initAutoPlay(swiperRef.current);
+    }
+  }, [children?.length, initAutoPlay]);
+
+  const enable = children?.length && children?.length > 3;
+
   return (
     <div className={Styles['screen-list']}>
       <div className={classList}>
@@ -22,12 +40,17 @@ export default (props) => {
       </div>
       <Swiper
         height={48}
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+          initAutoPlay(swiper);
+        }}
         className={Styles['list-body']}
+        init={false}
         autoplay={{
           delay: 2500,
           disableOnInteraction: false,
         }}
-        loop={children?.length >= 3}
+        loop={enable}
         loopAdditionalSlides={2}
         modules={[Autoplay]}
         direction="vertical"

src/pages/MonitoringScreen/index.jsx

@@ -105,7 +105,6 @@ export default (props) => {
     //作业面积统计
     getAreaDetail()
       .then((res) => {
-        console.log('---------res---->', res);
         setWorkAreaData([].concat(res));
       })
       .catch((err) => {