Kaynağa Gözat

fix: 通知栏增加滚动效果

ansoni 4 ay önce
ebeveyn
işleme
a0cefdc75d

+ 5 - 21
src/app/[locale]/(TabBar)/[[...share]]/_home/HomeNoticeBar.tsx

@@ -1,25 +1,13 @@
 "use client";
 import { BannerRep } from "@/api/home";
 import Box from "@/components/Box";
-import { NoticeBar, Swiper, SwiperRef } from "antd-mobile";
-import { FC, useEffect, useRef, useState } from "react";
+import { NoticeBar, Swiper } from "antd-mobile";
+import { FC } 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
@@ -33,12 +21,8 @@ const HomeNoticeBar: FC<Props> = (props) => {
                 indicator={() => null}
                 style={{ height: "0.36rem" }}
                 loop
-                onIndexChange={(index) => {
-                    const s = notices[index].content?.length! * 100;
-                    console.log(`🚀🚀🚀🚀🚀-> in HomeNoticeBar.tsx on 37`, index, s);
-                    setTimer(s);
-                }}
-                ref={swiperRef}
+                autoplay
+                autoplayInterval={10000}
             >
                 {notices.map((notice, index) => (
                     <Swiper.Item key={index}>
@@ -57,7 +41,7 @@ const HomeNoticeBar: FC<Props> = (props) => {
                                     width: "100%",
                                     padding: 0,
                                 }}
-                                speed={40}
+                                speed={60}
                                 bordered
                                 content={
                                     <div