From 424ec379bc38d2268966489d909cfc12df71729a Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Thu, 23 Jul 2026 14:14:29 +0800 Subject: [PATCH] =?UTF-8?q?refactor(SeamlessScroll):=20=E9=87=8D=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E4=B8=BA=20isAutoScroll?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将自动滚动开关属性由 value 改为 isAutoScroll - 更新代码中所有 value 相关判断为 isAutoScroll - 修改类型定义文件中属性名称以保持一致 - 优化注释说明,明确使用 isAutoScroll 控制自动滚动 - 保证悬停停止和滚动启动逻辑使用新属性名 --- src/components/SeamlessScroll/index.d.ts | 2 +- src/components/SeamlessScroll/index.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/SeamlessScroll/index.d.ts b/src/components/SeamlessScroll/index.d.ts index 34b8323..e106e3b 100644 --- a/src/components/SeamlessScroll/index.d.ts +++ b/src/components/SeamlessScroll/index.d.ts @@ -2,7 +2,7 @@ import type { ForwardRefExoticComponent, RefAttributes } from "react"; export interface SeamlessScrollProps { /** 是否开启自动滚动,默认 true */ - value?: boolean; + isAutoScroll?: boolean; /** 原始数据列表 */ list: unknown[]; /** 步进速度,step 需是单步大小的约数,值越大滚动的越快,默认 1 */ diff --git a/src/components/SeamlessScroll/index.js b/src/components/SeamlessScroll/index.js index 3371e76..6612450 100644 --- a/src/components/SeamlessScroll/index.js +++ b/src/components/SeamlessScroll/index.js @@ -6,7 +6,7 @@ import { throttle } from "throttle-debounce"; */ const SeamlessScroll = forwardRef((props, ref) => { const { - value = true, + isAutoScroll = true, list = [], step = 1, limitScrollNum = 3, @@ -242,7 +242,7 @@ const SeamlessScroll = forwardRef((props, ref) => { * * @description * 1. 计算并设置容器的宽度和高度 - * 2. 如果需要滚动且 value 为 true,启动滚动动画 + * 2. 如果需要滚动且 isAutoScroll 为 true,启动滚动动画 * * @note * - React 在 useEffect 中调用,可能存在 DOM 未完全渲染的情况 @@ -315,7 +315,7 @@ const SeamlessScroll = forwardRef((props, ref) => { cancle(); }; - const hoverStop = hover && value && isScroll; // 是否启用悬停停止功能 + const hoverStop = hover && isAutoScroll && isScroll; // 是否启用悬停停止功能 /** * 重置滚动状态 @@ -375,23 +375,23 @@ const SeamlessScroll = forwardRef((props, ref) => { * - 然后启动滚动 */ useEffect(() => { - if (isScroll && value && (realBoxHeight > 0 || realBoxWidth > 0) && !isHoverRef.current) { + if (isScroll && isAutoScroll && (realBoxHeight > 0 || realBoxWidth > 0) && !isHoverRef.current) { move(); } }, [realBoxHeight, realBoxWidth]); /** - * 监听 value 属性变化 - * 当 value 变化时,启动或停止滚动 + * 监听 isAutoScroll 属性变化 + * 当 isAutoScroll 变化时,启动或停止滚动 */ useEffect(() => { - if (value) { + if (isAutoScroll) { startMove(); } else { stopMove(); } - }, [value]); + }, [isAutoScroll]); /** * 监听 count 属性变化