upp

pc/src/pages/A2Main/GoodsSw/index.tsx

@@ -145,7 +145,7 @@ function GoodsSw() {
     if (dom && list1.length > 4 && !open) {
       scroolFu1(dom, dom.scrollLeft, 3000);
     }
-  }, [list1.length, open, scroolFu1]);
+  }, [list1, open, scroolFu1]);
 
   // 下面的开始自动滚动
   const scroolFu2 = useCallback(
@@ -175,7 +175,7 @@ function GoodsSw() {
     if (dom && list2.length > 4 && !open) {
       scroolFu2(dom, dom.scrollLeft, 3000);
     }
-  }, [list2.length, open, scroolFu2]);
+  }, [list2, open, scroolFu2]);
 
   // 上面的数组改变了数据
   useEffect(() => {
@@ -185,13 +185,16 @@ function GoodsSw() {
       dom.onwheel = (e) => {
         e.preventDefault();
         const num = dom.scrollLeft;
-        dom.scrollLeft = num + e.deltaY;
+        if (dom.scrollLeft + dom.clientWidth >= dom.scrollWidth)
+          dom.scrollLeft = 0;
+        // else if (num <= 0) dom.scrollLeft = dom.scrollWidth - dom.clientWidth;
+        else dom.scrollLeft = num + e.deltaY;
         colseTime1();
       };
       // 开启定时器
       scroolFu1(dom, 0, 1000);
     } else colseTime1();
-  }, [colseTime1, list1.length, scroolFu1]);
+  }, [colseTime1, list1, scroolFu1]);
 
   // 下面的数组改变了数据
   useEffect(() => {
@@ -203,13 +206,17 @@ function GoodsSw() {
       dom.onwheel = (e) => {
         e.preventDefault();
         const num = dom.scrollLeft;
-        dom.scrollLeft = num + e.deltaY;
+        if (num <= 0) dom.scrollLeft = dom.scrollWidth - dom.clientWidth;
+        // else if (dom.scrollLeft + dom.clientWidth >= dom.scrollWidth)
+        //   dom.scrollLeft = 0;
+        else dom.scrollLeft = num + e.deltaY;
+
         closeTime2();
       };
       // 开启定时器
       scroolFu2(dom, dom.scrollWidth - dom.clientWidth, 1000);
     } else closeTime2();
-  }, [closeTime2, list2.length, scroolFu2]);
+  }, [closeTime2, list2, scroolFu2]);
 
   // 第二个盒子的总宽度
   const goddsSw2 = useMemo(() => {
@@ -268,8 +275,8 @@ function GoodsSw() {
             // onMouseLeave={() => auto1Fu()}
           >
             <div className="goddsSw" style={{ width: goddsSw1 + "px" }}>
-              {list1.map((v) => (
-                <div key={v.id} className="goddsRow" title={v.name}>
+              {list1.map((v, i) => (
+                <div key={i} className="goddsRow" title={v.name}>
                   <div className="name">
                     {v.name.length > 10
                       ? v.name.substring(0, 10) + "..."
@@ -295,8 +302,8 @@ function GoodsSw() {
             // onMouseLeave={() => auto2Fu()}
           >
             <div className="goddsSw" style={{ width: goddsSw2 + "px" }}>
-              {list2.map((v) => (
-                <div key={v.id} className="goddsRow" title={v.name}>
+              {list2.map((v, i) => (
+                <div key={i} className="goddsRow" title={v.name}>
                   <div className="name">
                     {v.name.length > 10
                       ? v.name.substring(0, 10) + "..."