Compare commits
2 Commits
88cae53eff
...
d704f4d17e
| Author | SHA1 | Date |
|---|---|---|
|
|
d704f4d17e | |
|
|
dfb942994f |
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "zy-react-library",
|
||||
"private": false,
|
||||
"version": "2.0.14",
|
||||
"version": "2.0.15",
|
||||
"type": "module",
|
||||
"description": "",
|
||||
"author": "LiuJiaNan",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|||
|
||||
export interface SeamlessScrollProps {
|
||||
/** 是否开启自动滚动,默认 true */
|
||||
value?: boolean;
|
||||
isAutoScroll?: boolean;
|
||||
/** 原始数据列表 */
|
||||
list: unknown[];
|
||||
/** 步进速度,step 需是单步大小的约数,值越大滚动的越快,默认 1 */
|
||||
|
|
|
|||
|
|
@ -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 属性变化
|
||||
|
|
|
|||
Loading…
Reference in New Issue