blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(IndexBar): allow active bottom anchor (#10404)

Browse Source 
* fix(IndexBar): allow active bottom anchor

* fix(IndexBar): prettier
This commit is contained in:
nemo-shen 2022-03-18 08:30:22 +08:00 committed by GitHub
parent 5f67b9ee42
commit 7c00cea862
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/vant/src/index-bar/IndexBar.tsx
View File

@ -81,6 +81,7 @@ export default defineComponent({
const touch = useTouch(); const touch = useTouch();
const scrollParent = useScrollParent(root); const scrollParent = useScrollParent(root);
const { children, linkChildren } = useChildren(INDEX_BAR_KEY); const { children, linkChildren } = useChildren(INDEX_BAR_KEY);
let selectActiveIndex: string;
linkChildren({ props }); linkChildren({ props });
@ -116,6 +117,9 @@ export default defineComponent({
return -1; return -1;
}; };
const getMatchAnchor = (index: string) =>
children.find((item) => String(item.index) === index);
const onScroll = () => { const onScroll = () => {
if (isHidden(root)) { if (isHidden(root)) {
return; return;
@ -129,7 +133,16 @@ export default defineComponent({
item.getRect(scrollParent.value, scrollParentRect) item.getRect(scrollParent.value, scrollParentRect)
); );
const active = getActiveAnchor(scrollTop, rects); let active = -1;
if (selectActiveIndex) {
const match = getMatchAnchor(selectActiveIndex);
if (match) {
const rect = match.getRect(scrollParent.value, scrollParentRect);
active = getActiveAnchor(rect.top, rects);
}
} else {
active = getActiveAnchor(scrollTop, rects);
}
activeAnchor.value = indexList[active]; activeAnchor.value = indexList[active];
@ -150,7 +163,7 @@ export default defineComponent({
state.top = state.top =
Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) +
scrollParentRect.top; scrollParentRect.top;
} else if (index === active - 1) { } else if (index === active - 1 && selectActiveIndex === '') {
const activeItemTop = rects[active].top - scrollTop; const activeItemTop = rects[active].top - scrollTop;
state.active = activeItemTop > 0; state.active = activeItemTop > 0;
state.top = state.top =
@ -160,6 +173,8 @@ export default defineComponent({
} }
}); });
} }
selectActiveIndex = '';
}; };
const init = () => { const init = () => {
@ -193,10 +208,19 @@ export default defineComponent({
}); });
const scrollTo = (index: string | number) => { const scrollTo = (index: string | number) => {
index = String(index); selectActiveIndex = String(index);
const match = children.find((item) => String(item.index) === index); const match = getMatchAnchor(selectActiveIndex);
if (match) { if (match) {
const scrollTop = getScrollTop(scrollParent.value!);
const scrollParentRect = useRect(scrollParent);
const { offsetHeight } = document.documentElement;
if (scrollTop === offsetHeight - scrollParentRect.height) {
onScroll();
return;
}
match.$el.scrollIntoView(); match.$el.scrollIntoView();
if (props.sticky && props.stickyOffsetTop) { if (props.sticky && props.stickyOffsetTop) {