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 属性变化