|
|
@@ -13,20 +13,18 @@ export interface AnnouncementItem {
|
|
|
title: string;
|
|
|
}
|
|
|
|
|
|
- interface AnnouncementBarProps {
|
|
|
+interface AnnouncementBarProps {
|
|
|
items?: AnnouncementItem[];
|
|
|
}
|
|
|
|
|
|
-export default function AnnouncementBar({ items = [] }: AnnouncementBarProps) {
|
|
|
+export default function TopSwiperBanner({ items = [] }: AnnouncementBarProps) {
|
|
|
const [index, setIndex] = useState(0);
|
|
|
+
|
|
|
const [enableTransition, setEnableTransition] = useState(true);
|
|
|
|
|
|
- // 没有数据不显示
|
|
|
- if (!items.length) {
|
|
|
- return null;
|
|
|
- }
|
|
|
+ const loopItems = [...items, ...(items.length ? [items[0]] : [])];
|
|
|
|
|
|
- const loopItems = [...items, items[0]];
|
|
|
+ // 自动滚动
|
|
|
useEffect(() => {
|
|
|
if (items.length <= 1) {
|
|
|
return;
|
|
|
@@ -41,6 +39,7 @@ export default function AnnouncementBar({ items = [] }: AnnouncementBarProps) {
|
|
|
};
|
|
|
}, [items.length]);
|
|
|
|
|
|
+ // 无缝循环重置
|
|
|
useEffect(() => {
|
|
|
if (index !== items.length) {
|
|
|
return;
|
|
|
@@ -62,6 +61,9 @@ export default function AnnouncementBar({ items = [] }: AnnouncementBarProps) {
|
|
|
window.clearTimeout(timer);
|
|
|
};
|
|
|
}, [index, items.length]);
|
|
|
+ if (!items.length) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
@@ -98,14 +100,7 @@ export default function AnnouncementBar({ items = [] }: AnnouncementBarProps) {
|
|
|
"
|
|
|
>
|
|
|
{item.link ? (
|
|
|
- <Link
|
|
|
- href={item.link}
|
|
|
- className="
|
|
|
- hover:underline
|
|
|
- "
|
|
|
- >
|
|
|
- {item.title}
|
|
|
- </Link>
|
|
|
+ <Link href={item.link}>{item.title}</Link>
|
|
|
) : (
|
|
|
<span>{item.title}</span>
|
|
|
)}
|