AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-11 15:47:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 当滚动条子元素变换时，自动更新最大长度

Browse Source
This commit is contained in:
unanmed 2025-02-22 15:36:10 +08:00
parent 36f847f4a8
commit dfa7428ba8
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/module/render/components/scroll.tsx
View File

@ -45,7 +45,7 @@ export interface ScrollProps {
* 滚动到最下方（最右方）时的填充大小，如果默认的高度计算方式有误，
* 那么可以调整此参数来修复错误
*/
padHeight?: number;
pad?: number;
}
type ScrollSlots = SlotsType<{
@ -53,7 +53,7 @@ type ScrollSlots = SlotsType<{
}>;
const scrollProps = {
props: ['hor', 'noscroll', 'loc', 'padHeight']
props: ['hor', 'noscroll', 'loc', 'pad']
} satisfies SetupComponentOptions<ScrollProps, {}, string, ScrollSlots>;
/** 滚动条图示的最短长度 */
@ -199,8 +199,22 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
*/
const onTransform = (item: RenderItem) => {
const rect = item.getBoundingRect();
const pad = props.pad ?? 0;
if (direction.value === ScrollDirection.Horizontal) {
if (rect.right > maxLength - pad) {
maxLength = rect.right + pad;
updatePosition();
}
} else {
if (rect.bottom > maxLength - pad) {
maxLength = rect.bottom + pad;
updatePosition();
}
}
getArea(item, rect);
checkItem(item);
scroll.value?.update();
content.value?.update();
};
/**
@ -256,7 +270,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
listenedChild.add(v);
checkItem(v);
});
maxLength = max + (props.padHeight ?? 0);
maxLength = max + (props.pad ?? 0);
updatePosition();
scroll.value?.update();
};

8
src/module/render/ui/statusBar.tsx
View File

@ -169,11 +169,11 @@ export const RightStatusBar = defineComponent<StatusBarProps<IRightHeroStatus>>(
return (
<container loc={p.loc}>
<g-rect loc={[0, 0, p.loc[2], p.loc[3]]} stroke></g-rect>
<Scroll loc={[0, 100, 180, 100]}>
<Scroll loc={[0, 100, 180, 100]} hor>
<text text="测试1" loc={[0, 0]}></text>
<text text="测试2" loc={[0, 50]}></text>
<text text="测试3" loc={[0, 100]}></text>
<text text="测试4" loc={[0, 200]}></text>
<text text="测试2" loc={[50, 0]}></text>
<text text="测试3" loc={[100, 0]}></text>
<text text="测试4" loc={[200, 0]}></text>
</Scroll>
</container>
);