[improvement] Tabs：sticky实现优化，不依赖外层的scrollTop (#1197)

example/pages/tab/index.js

@@ -3,8 +3,7 @@ import Page from '../../common/page';
 Page({
   data: {
     tabs: [1, 2, 3, 4],
-    tabsMore: [1, 2, 3, 4, 5, 6, 7, 8],
-    scrollTop: 0
+    tabsMore: [1, 2, 3, 4, 5, 6, 7, 8]
   },
 
   onClickDisabled(event) {
@@ -26,11 +25,5 @@ Page({
       title: `点击标签 ${event.detail.index + 1}`,
       icon: 'none'
     });
-  },
-
-  onPageScroll(event) {
-    this.setData({
-      scrollTop: event.scrollTop
-    });
   }
 });

example/pages/tab/index.wxml

@@ -87,7 +87,7 @@
 </demo-block>
 
 <demo-block title="粘性布局">
-  <van-tabs sticky scroll-top="{{ scrollTop }}">
+  <van-tabs sticky>
     <van-tab
       wx:for="1234"
       wx:key="index"

packages/tab/README.md

@@ -179,7 +179,6 @@ Page({
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` |
 | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` |
-| scroll-top | 页面的`scrollTop`，粘性布局下必须要传入，单位 px | `Number` | `0` |
 
 ### Tab API
 

packages/tabs/index.ts

@@ -63,11 +63,7 @@ VantComponent({
       type: Number,
       value: 0
     },
-    swipeable: Boolean,
-    scrollTop: {
-      type: Number,
-      value: 0
-    }
+    swipeable: Boolean
   },
 
   data: {
@@ -90,7 +86,6 @@ VantComponent({
     lineWidth: 'setLine',
     active: 'setActiveTab',
     animated: 'setTrack',
-    scrollTop: 'onScroll',
     offsetTop: 'setWrapStyle'
   },
 
@@ -102,6 +97,12 @@ VantComponent({
     this.setLine();
     this.setTrack();
     this.scrollIntoView();
+    this.observerTabScroll();
+    this.observerContentScroll();
+  },
+
+  destroyed() {
+    wx.createIntersectionObserver(this).disconnect();
   },
 
   methods: {
@@ -310,39 +311,55 @@ VantComponent({
       });
     },
 
-    // adjust tab position
-    onScroll(scrollTop) {
+    observerTabScroll() {
       if (!this.data.sticky) return;
 
       const { offsetTop } = this.data;
+      wx.createIntersectionObserver(this, {
+        thresholds: [1]
+      }).relativeToViewport().observe('.van-tabs', result => {
+        const { top } = result.boundingClientRect;
+        let position = '';
 
-      this.getRect('.van-tabs').then(rect => {
-        const { top, height } = rect;
+        if (offsetTop > top) {
+          position = 'top';
+        }
 
-        this.getRect('.van-tabs__wrap').then(rect => {
-          const { height: wrapHeight } = rect;
-          let position = '';
-
-          if (offsetTop > top + height - wrapHeight) {
-            position = 'bottom';
-          } else if (offsetTop > top) {
-            position = 'top';
-          }
-
-          this.$emit('scroll', {
-            scrollTop: scrollTop + offsetTop,
-            isFixed: position === 'top'
-          });
-
-          if (position !== this.data.position) {
-            this.set({
-              position
-            }, () => {
-              this.setWrapStyle();
-            });
-          }
+        this.$emit('scroll', {
+          scrollTop: top + offsetTop,
+          isFixed: position === 'top'
         });
+
+        this.setPosition(position);
       });
+    },
+
+    observerContentScroll() {
+      if (!this.data.sticky) return;
+
+      const { offsetTop } = this.data;
+      wx.createIntersectionObserver(this).relativeToViewport().observe('.van-tabs__content', result => {
+        const { top } = result.boundingClientRect;
+        let position = '';
+
+        if (result.intersectionRatio <= 0) {
+          position = 'bottom';
+        } else if (offsetTop > top) {
+          position = 'top';
+        }
+
+        this.setPosition(position);
+      });
+    },
+
+    setPosition(position) {
+      if (position !== this.data.position) {
+        this.set({
+          position
+        }, () => {
+          this.setWrapStyle();
+        });
+      }
     }
   }
 });