fix(tabs): remove duplicated init offset

fix #4202

packages/tabs/index.ts

@@ -49,6 +49,10 @@ VantComponent({
       type: null,
       value: 0,
       observer(name) {
+        if (!this.skipInit) {
+          this.skipInit = true;
+        }
+
         if (name !== this.getCurrentName()) {
           this.setCurrentIndexByName(name);
         }
@@ -94,8 +98,9 @@ VantComponent({
     scrollLeft: 0,
     scrollable: false,
     currentIndex: 0,
-    container: (null as unknown) as () => WechatMiniprogram.NodesRef,
+    container: null as unknown as () => WechatMiniprogram.NodesRef,
     skipTransition: true,
+    scrollWithAnimation: false,
     lineOffsetLeft: 0,
   },
 
@@ -105,8 +110,10 @@ VantComponent({
         container: () => this.createSelectorQuery().select('.van-tabs'),
       });
 
-      this.resize(true);
-      this.scrollIntoView();
+      if (!this.skipInit) {
+        this.resize();
+        this.scrollIntoView();
+      }
     });
   },
 
@@ -191,10 +198,12 @@ VantComponent({
       const shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex });
 
-      nextTick(() => {
+      requestAnimationFrame(() => {
         this.resize();
         this.scrollIntoView();
+      });
 
+      nextTick(() => {
         this.trigger('input');
         if (shouldEmitChange) {
           this.trigger('change');
@@ -210,12 +219,12 @@ VantComponent({
       }
     },
 
-    resize(skipTransition = false) {
+    resize() {
       if (this.data.type !== 'line') {
         return;
       }
 
-      const { currentIndex, ellipsis } = this.data;
+      const { currentIndex, ellipsis, skipTransition } = this.data;
 
       Promise.all([
         getAllRect(this, '.van-tab'),
@@ -234,16 +243,19 @@ VantComponent({
         lineOffsetLeft +=
           (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
 
-        this.setData({
-          lineOffsetLeft,
-          skipTransition,
-        });
+        this.setData({ lineOffsetLeft });
+
+        if (skipTransition) {
+          nextTick(() => {
+            this.setData({ skipTransition: false });
+          });
+        }
       });
     },
 
     // scroll active tab into view
     scrollIntoView() {
-      const { currentIndex, scrollable } = this.data;
+      const { currentIndex, scrollable, scrollWithAnimation } = this.data;
 
       if (!scrollable) {
         return;
@@ -261,6 +273,12 @@ VantComponent({
         this.setData({
           scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
         });
+
+        if (!scrollWithAnimation) {
+          nextTick(() => {
+            this.setData({ scrollWithAnimation: true });
+          });
+        }
       });
     },
 

packages/tabs/index.wxml

@@ -14,7 +14,7 @@
 
       <scroll-view
         scroll-x="{{ scrollable }}"
-        scroll-with-animation
+        scroll-with-animation="{{ scrollWithAnimation }}"
         scroll-left="{{ scrollLeft }}"
         class="{{ utils.bem('tabs__scroll', [type]) }}"
         style="{{ color ? 'border-color: ' + color : '' }}"