perf(components): 优化 ScrollBar 组件性能
- 将 createMemo 改为 createEffect,减少不必要的计算 - 优化 thumbPos 计算逻辑,提高滚动性能 - 调整 setIsDragging 调用方式,确保正确更新状态
This commit is contained in:
@@ -2,6 +2,7 @@ import cx from 'clsx';
|
|||||||
import { clamp } from 'es-toolkit';
|
import { clamp } from 'es-toolkit';
|
||||||
import {
|
import {
|
||||||
Component,
|
Component,
|
||||||
|
createEffect,
|
||||||
createMemo,
|
createMemo,
|
||||||
createSignal,
|
createSignal,
|
||||||
JSX,
|
JSX,
|
||||||
@@ -27,9 +28,9 @@ const ScrollBar: Component<ScrollBarProps> = (props) => {
|
|||||||
const [thumbPos, setThumbPos] = createSignal(0);
|
const [thumbPos, setThumbPos] = createSignal(0);
|
||||||
const [isDragging, setIsDragging] = createSignal(false);
|
const [isDragging, setIsDragging] = createSignal(false);
|
||||||
|
|
||||||
const thumbPos = createMemo(() => {
|
createEffect(() => {
|
||||||
if (props.scrollMax <= 0) {
|
if (props.scrollMax <= 0) {
|
||||||
return 0;
|
setThumbPos(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollPercent = props.scrollPos / props.scrollMax;
|
const scrollPercent = props.scrollPos / props.scrollMax;
|
||||||
@@ -37,10 +38,11 @@ const ScrollBar: Component<ScrollBarProps> = (props) => {
|
|||||||
const trackSize = props.axis === 'y' ? track.clientHeight : track.clientWidth;
|
const trackSize = props.axis === 'y' ? track.clientHeight : track.clientWidth;
|
||||||
|
|
||||||
if (trackSize < thumbSize) {
|
if (trackSize < thumbSize) {
|
||||||
return 0;
|
setThumbPos(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return scrollPercent * (trackSize - thumbSize);
|
const pos = scrollPercent * (trackSize - thumbSize);
|
||||||
|
setThumbPos(pos);
|
||||||
});
|
});
|
||||||
const thumbStyle = createMemo(() => ({
|
const thumbStyle = createMemo(() => ({
|
||||||
[props.axis === 'y' ? 'top' : 'left']: `${thumbPos()}px`,
|
[props.axis === 'y' ? 'top' : 'left']: `${thumbPos()}px`,
|
||||||
|
Reference in New Issue
Block a user