upp

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

@@ -123,22 +123,8 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
   const [barrageAll, setBarrageAll] = useState<A2BarrageType[]>([]);
   const barrMoveRef = useRef<HTMLDivElement>(null);
   const [barrInd, setBarrInd] = useState(0);
-  const barrIndRef = useRef(0);
-  const barrTimeRef = useRef(0);
   const barrMoveRefKill = useRef<any>(null);
 
-  useEffect(() => {
-    if (barrageAll.length) {
-      // 开启定时器
-      barrTimeRef.current = window.setInterval(() => {
-        let num = barrIndRef.current + 1;
-        if (num >= barrageAll.length) num = 0;
-        setBarrInd(num);
-        barrIndRef.current = num;
-      }, 17000);
-    }
-  }, [barrageAll.length]);
-
   // 每次弹幕的索引变化的时候
   useEffect(() => {
     window.setTimeout(() => {
@@ -159,11 +145,16 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
             duration: 16,
             ease: "none",
             x: endNum,
+            onComplete: () => {
+              let num = barrInd + 1;
+              if (num >= barrageAll.length) num = 0;
+              setBarrInd(num);
+            },
           }
         );
       }
     }, 200);
-  }, [barrInd]);
+  }, [barrInd, barrageAll.length]);
 
   // 通过id获取详情
   const getDataFu = useCallback(
@@ -259,7 +250,6 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
   useEffect(() => {
     getDataFu(id);
     return () => {
-      clearInterval(barrTimeRef.current);
       barrMoveRefKill.current?.kill();
     };
   }, [getDataFu, id]);

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

@@ -60,6 +60,11 @@ function GoodsSw() {
     goodsListAll.forEach((v, i) => {
       if (i % 2 === 0) arr.push(v);
     });
+    if (arr.length > 4) {
+      for (let i = 0; i < 4; i++) {
+        arr.push(arr[i]);
+      }
+    }
     return arr;
   }, [goodsListAll]);
 
@@ -69,6 +74,11 @@ function GoodsSw() {
     goodsListAll.forEach((v, i) => {
       if (i % 2 !== 0) arr.push(v);
     });
+    if (arr.length > 4) {
+      for (let i = 0; i < 4; i++) {
+        arr.push(arr[i]);
+      }
+    }
     return arr;
   }, [goodsListAll]);
 
@@ -187,6 +197,8 @@ function GoodsSw() {
   useEffect(() => {
     if (list2.length > 4) {
       const dom = document.querySelector("#goddsSwBox2") as HTMLDivElement;
+      // 初始滚动到末尾
+      dom.scrollLeft = dom.scrollWidth - dom.clientWidth;
       // 监听鼠标滚轮
       dom.onwheel = (e) => {
         e.preventDefault();

pc/src/store/action/A2Main.ts

@@ -8,6 +8,7 @@ import { A2R_fSaveType, A2SelectType, A2getGoodsDataType } from "@/types";
 export const A2_APIgetGoodsList = (data: A2getGoodsDataType) => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("show/goods/pageList", data);
+
     if (res.code === 0) {
       dispatch({
         type: "main/goodsList",