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

* fix(IndexBar): allow active bottom anchor * fix(IndexBar): prettier
youzan · Mar 18, 2022 · 7c00cea · 7c00cea
1 parent 5f67b9e
commit 7c00cea
Showing 1 changed file with 28 additions and 4 deletions.
diff --git a/packages/vant/src/index-bar/IndexBar.tsx b/packages/vant/src/index-bar/IndexBar.tsx
@@ -81,6 +81,7 @@ export default defineComponent({
     const touch = useTouch();
     const scrollParent = useScrollParent(root);
     const { children, linkChildren } = useChildren(INDEX_BAR_KEY);
+    let selectActiveIndex: string;
 
     linkChildren({ props });
 
@@ -116,6 +117,9 @@ export default defineComponent({
       return -1;
     };
 
+    const getMatchAnchor = (index: string) =>
+      children.find((item) => String(item.index) === index);
+
     const onScroll = () => {
       if (isHidden(root)) {
         return;
@@ -129,7 +133,16 @@ export default defineComponent({
         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];
 
@@ -150,7 +163,7 @@ export default defineComponent({
             state.top =
               Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) +
               scrollParentRect.top;
-          } else if (index === active - 1) {
+          } else if (index === active - 1 && selectActiveIndex === '') {
             const activeItemTop = rects[active].top - scrollTop;
             state.active = activeItemTop > 0;
             state.top =
@@ -160,6 +173,8 @@ export default defineComponent({
           }
         });
       }
+
+      selectActiveIndex = '';
     };
 
     const init = () => {
@@ -193,10 +208,19 @@ export default defineComponent({
       });
 
     const scrollTo = (index: string | number) => {
-      index = String(index);
-      const match = children.find((item) => String(item.index) === index);
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
 
       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();
 
         if (props.sticky && props.stickyOffsetTop) {