[bugfix] IndexBar: activeAnchor bug fixes (#3832)

修复 sticky 设为 false 时activeAnchor失效的bug；修复 this.scroller 不为 window 时activeAnchor错乱的bug；
youzan · Jul 12, 2019 · c88bab2 · c88bab2
1 parent 9aab46f
commit c88bab2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
@@ -77,11 +77,9 @@ export default createComponent({
 
   methods: {
     onScroll() {
-      if (!this.sticky) {
-        return;
-      }
-
-      const scrollTop = getScrollTop(this.scroller);
+      const scrollTop = this.scroller === window
+        ? getScrollTop(this.scroller)
+        : 0;
       const rects = this.children.map(item => ({
         height: item.height,
         top: getElementTop(item.$el)
@@ -90,18 +88,21 @@ export default createComponent({
       const active = this.getActiveAnchorIndex(scrollTop, rects);
 
       this.activeAnchorIndex = this.indexList[active];
-      this.children.forEach((item, index) => {
-        if (index === active) {
-          item.active = true;
-          item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop);
-        } else if (index === active - 1) {
-          const activeItemTop = rects[active].top - scrollTop;
-          item.active = activeItemTop > 0;
-          item.top = activeItemTop - item.height;
-        } else {
-          item.active = false;
-        }
-      });
+
+      if (this.sticky) {
+        this.children.forEach((item, index) => {
+          if (index === active) {
+            item.active = true;
+            item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop);
+          } else if (index === active - 1) {
+            const activeItemTop = rects[active].top - scrollTop;
+            item.active = activeItemTop > 0;
+            item.top = activeItemTop - item.height;
+          } else {
+            item.active = false;
+          }
+        });
+      }
     },
 
     getActiveAnchorIndex(scrollTop, rects) {

diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap
@@ -14,7 +14,7 @@ exports[`custom anchor text 1`] = `
 
 exports[`scroll and update active anchor 1`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0">
     <div class="van-index-anchor">1</div>
   </div>