fix: 通知栏增加滚动效果

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeNoticeBar.tsx

@@ -1,35 +1,71 @@
 "use client";
 import { BannerRep } from "@/api/home";
 import Box from "@/components/Box";
-import { Swiper } from "antd-mobile";
-import { FC } from "react";
+import { NoticeBar, Swiper, SwiperRef } from "antd-mobile";
+import { FC, useEffect, useRef, useState } from "react";
 interface Props {
     notices: BannerRep[];
 }
 const HomeNoticeBar: FC<Props> = (props) => {
     const { notices } = props;
+    const currentIndex = useRef<NodeJS.Timeout | null>(null);
+    const [timer, setTimer] = useState(3000);
+    const swiperRef = useRef<SwiperRef>(null);
+
+    useEffect(() => {
+        currentIndex.current = setTimeout(() => {
+            swiperRef.current?.swipeNext();
+        }, timer);
+        return () => {
+            currentIndex.current && clearTimeout(currentIndex.current);
+        };
+    }, [timer]);
+
     return (
-        <div className={"my-[0.0694rem] flex items-center bg-[url(/home/notice.png)] bg-[length:100%_100%] px-[.1rem] overflow-hidden"}>
+        <div
+            className={
+                "my-[0.0694rem] flex items-center overflow-hidden bg-[url(/home/notice.png)] bg-[length:100%_100%] px-[.1rem]"
+            }
+        >
             <div className={"iconfont icon-laba mr-[0.06rem] text-[.14rem] text-[#86e2f0]"}></div>
             <Swiper
                 direction="vertical"
                 indicator={() => null}
-                style={{ "height": "0.36rem" }}
+                style={{ height: "0.36rem" }}
                 loop
-                autoplay
+                onIndexChange={(index) => {
+                    const s = notices[index].content?.length! * 100;
+                    console.log(`🚀🚀🚀🚀🚀-> in HomeNoticeBar.tsx on 37`, index, s);
+                    setTimer(s);
+                }}
+                ref={swiperRef}
             >
                 {notices.map((notice, index) => (
                     <Swiper.Item key={index}>
                         <Box
                             none
                             action={notice.action_type}
-                            className={
-                                "flex h-[0.36rem] items-center overflow-hidden" +
-                                " flex-wrap text-ellipsis"
-                            }
+                            className={"flex h-[0.36rem] w-[100%] items-center"}
                             actionData={notice.action_params}
                         >
-                            <div dangerouslySetInnerHTML={{ __html: notice.content! }}></div>
+                            <NoticeBar
+                                delay={0}
+                                icon={null}
+                                style={{
+                                    "--background-color": "none",
+                                    "--border-color": "none",
+                                    width: "100%",
+                                    padding: 0,
+                                }}
+                                speed={40}
+                                bordered
+                                content={
+                                    <div
+                                        dangerouslySetInnerHTML={{ __html: notice.content! }}
+                                    ></div>
+                                }
+                            />
+                            {/**/}
                         </Box>
                     </Swiper.Item>
                 ))}