Compare commits
2 Commits
88cae53eff
...
d704f4d17e
| Author | SHA1 | Date |
|---|---|---|
|
|
d704f4d17e | |
|
|
dfb942994f |
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "zy-react-library",
|
"name": "zy-react-library",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "2.0.14",
|
"version": "2.0.15",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "LiuJiaNan",
|
"author": "LiuJiaNan",
|
||||||
|
|
|
||||||
|
|
@ -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