fix(IndexBar): remove prop scrollTop (#2999)

fix #2821, fix #2768

packages/index-anchor/index.ts

@@ -4,7 +4,7 @@ VantComponent({
   relation: {
     name: 'index-bar',
     type: 'ancestor',
-    current: 'index-anchor',
+    current: 'index-anchor'
   },
 
   props: {
@@ -16,5 +16,22 @@ VantComponent({
     active: false,
     wrapperStyle: '',
     anchorStyle: ''
+  },
+
+  methods: {
+    scrollIntoView(scrollTop) {
+      this.getBoundingClientRect().then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+          wx.pageScrollTo({
+            duration: 0,
+            scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop
+          });
+        }
+      );
+    },
+
+    getBoundingClientRect() {
+      return this.getRect('.van-index-anchor-wrapper');
+    }
   }
 });

packages/index-bar/README.md

@@ -20,7 +20,7 @@
 点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
 
 ```html
-<van-index-bar scroll-top="{{ scrollTop }}">
+<van-index-bar>
   <view>
     <van-index-anchor index="A" />
     <van-cell title="文本" />
@@ -39,25 +39,12 @@
 </van-index-bar>
 ```
 
-```javascript
-Page({
-  onPageScroll(event) {
-    this.setData({
-      scrollTop: event.scrollTop
-    });
-  }
-});
-```
-
 ### 自定义索引列表
 
 可以通过`index-list`属性自定义展示的索引字符列表，
 
 ```html
-<van-index-bar
+<van-index-bar index-list="{{ indexList }}">
-  scroll-top="{{ scrollTop }}"
-  index-list="{{ indexList }}"
->
   <view>
     <van-index-anchor index="1">标题1</van-index-anchor>
     <van-cell title="文本" />
@@ -81,12 +68,6 @@ Page({
   data: {
     indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   },
-
-  onPageScroll(event) {
-    this.setData({
-      scrollTop: event.scrollTop
-    });
-  }
 });
 ```
 
@@ -96,7 +77,6 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| scroll-top | 当前滚动高度（自定义组件内部感知不到页面滚动，所以依赖接入方传入）| *Number* | 0 | - |
 | index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | - |
 | z-index | z-index 层级 | *number* | `1` | - |
 | sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | - |

packages/index-bar/index.ts

@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { GREEN } from '../common/color';
+import { pageScrollMixin } from '../mixins/page-scroll';
 
 const indexList = () => {
   const indexList = [];
@@ -20,9 +21,6 @@ VantComponent({
     linked() {
       this.updateData();
     },
-    linkChanged() {
-      this.updateData();
-    },
     unlinked() {
       this.updateData();
     }
@@ -41,11 +39,6 @@ VantComponent({
       type: String,
       value: GREEN
     },
-    scrollTop: {
-      type: Number,
-      value: 0,
-      observer: 'onScroll'
-    },
     stickyOffsetTop: {
       type: Number,
       value: 0
@@ -56,18 +49,30 @@ VantComponent({
     }
   },
 
+  mixins: [
+    pageScrollMixin(function(event) {
+      this.scrollTop = event.scrollTop || 0;
+      this.onScroll();
+    })
+  ],
+
   data: {
     activeAnchorIndex: null,
     showSidebar: false
   },
 
+  created() {
+    this.scrollTop = 0;
+  },
+
   methods: {
     updateData() {
-      this.timer && clearTimeout(this.timer);
+      wx.nextTick(() => {
+        if (this.timer != null) {
+          clearTimeout(this.timer);
+        }
 
         this.timer = setTimeout(() => {
-        this.children = this.getRelationNodes('../index-anchor/index');
-
           this.setData({
             showSidebar: !!this.children.length
           });
@@ -76,6 +81,7 @@ VantComponent({
             this.onScroll();
           });
         }, 0);
+      });
     },
 
     setRect() {
@@ -95,7 +101,7 @@ VantComponent({
               (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
                 Object.assign(anchor, {
                   height: rect.height,
-                  top: rect.top + this.data.scrollTop
+                  top: rect.top + this.scrollTop
                 });
               }
             )
@@ -108,7 +114,7 @@ VantComponent({
         (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
           Object.assign(this, {
             height: rect.height,
-            top: rect.top + this.data.scrollTop
+            top: rect.top + this.scrollTop
           });
         }
       );
@@ -147,8 +153,8 @@ VantComponent({
     },
 
     getActiveAnchorIndex() {
-      const { children } = this;
+      const { children, scrollTop } = this;
-      const { sticky, scrollTop, stickyOffsetTop } = this.data;
+      const { sticky, stickyOffsetTop } = this.data;
 
       for (let i = this.children.length - 1; i >= 0; i--) {
         const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
@@ -163,19 +169,13 @@ VantComponent({
     },
 
     onScroll() {
-      const { children = [] } = this;
+      const { children = [], scrollTop } = this;
 
       if (!children.length) {
         return;
       }
 
-      const {
+      const { sticky, stickyOffsetTop, zIndex, highlightColor } = this.data;
-        sticky,
-        stickyOffsetTop,
-        zIndex,
-        highlightColor,
-        scrollTop
-      } = this.data;
 
       const active = this.getActiveAnchorIndex();
 
@@ -298,11 +298,8 @@ VantComponent({
       );
 
       if (anchor) {
+        anchor.scrollIntoView(this.scrollTop);
         this.$emit('select', anchor.data.index);
-        wx.pageScrollTo({
-          duration: 0,
-          scrollTop: anchor.top
-        });
       }
     }
   }