refactor(SeamlessScroll): 重命名自动滚动属性为 isAutoScroll
- 将自动滚动开关属性由 value 改为 isAutoScroll - 更新代码中所有 value 相关判断为 isAutoScroll - 修改类型定义文件中属性名称以保持一致 - 优化注释说明,明确使用 isAutoScroll 控制自动滚动 - 保证悬停停止和滚动启动逻辑使用新属性名2.0
parent
88cae53eff
commit
dfb942994f
|
|
@ -2,7 +2,7 @@ import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
||||||
|
|
||||||
export interface SeamlessScrollProps {
|
export interface SeamlessScrollProps {
|
||||||
/** 是否开启自动滚动,默认 true */
|
/** 是否开启自动滚动,默认 true */
|
||||||
value?: boolean;
|
isAutoScroll?: boolean;
|
||||||
/** 原始数据列表 */
|
/** 原始数据列表 */
|
||||||
list: unknown[];
|
list: unknown[];
|
||||||
/** 步进速度,step 需是单步大小的约数,值越大滚动的越快,默认 1 */
|
/** 步进速度,step 需是单步大小的约数,值越大滚动的越快,默认 1 */
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { throttle } from "throttle-debounce";
|
||||||
*/
|
*/
|
||||||
const SeamlessScroll = forwardRef((props, ref) => {
|
const SeamlessScroll = forwardRef((props, ref) => {
|
||||||
const {
|
const {
|
||||||
value = true,
|
isAutoScroll = true,
|
||||||
list = [],
|
list = [],
|
||||||
step = 1,
|
step = 1,
|
||||||
limitScrollNum = 3,
|
limitScrollNum = 3,
|
||||||
|
|
@ -242,7 +242,7 @@ const SeamlessScroll = forwardRef((props, ref) => {
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
* 1. 计算并设置容器的宽度和高度
|
* 1. 计算并设置容器的宽度和高度
|
||||||
* 2. 如果需要滚动且 value 为 true,启动滚动动画
|
* 2. 如果需要滚动且 isAutoScroll 为 true,启动滚动动画
|
||||||
*
|
*
|
||||||
* @note
|
* @note
|
||||||
* - React 在 useEffect 中调用,可能存在 DOM 未完全渲染的情况
|
* - React 在 useEffect 中调用,可能存在 DOM 未完全渲染的情况
|
||||||
|
|
@ -315,7 +315,7 @@ const SeamlessScroll = forwardRef((props, ref) => {
|
||||||
cancle();
|
cancle();
|
||||||
};
|
};
|
||||||
|
|
||||||
const hoverStop = hover && value && isScroll; // 是否启用悬停停止功能
|
const hoverStop = hover && isAutoScroll && isScroll; // 是否启用悬停停止功能
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 重置滚动状态
|
* 重置滚动状态
|
||||||
|
|
@ -375,23 +375,23 @@ const SeamlessScroll = forwardRef((props, ref) => {
|
||||||
* - 然后启动滚动
|
* - 然后启动滚动
|
||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isScroll && value && (realBoxHeight > 0 || realBoxWidth > 0) && !isHoverRef.current) {
|
if (isScroll && isAutoScroll && (realBoxHeight > 0 || realBoxWidth > 0) && !isHoverRef.current) {
|
||||||
move();
|
move();
|
||||||
}
|
}
|
||||||
}, [realBoxHeight, realBoxWidth]);
|
}, [realBoxHeight, realBoxWidth]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 监听 value 属性变化
|
* 监听 isAutoScroll 属性变化
|
||||||
* 当 value 变化时,启动或停止滚动
|
* 当 isAutoScroll 变化时,启动或停止滚动
|
||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (value) {
|
if (isAutoScroll) {
|
||||||
startMove();
|
startMove();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
stopMove();
|
stopMove();
|
||||||
}
|
}
|
||||||
}, [value]);
|
}, [isAutoScroll]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 监听 count 属性变化
|
* 监听 count 属性变化
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue