From 8f12b6c715440e7bcd87894790ea09abb1e3deb3 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Thu, 6 Oct 2022 16:07:12 +0800
Subject: [PATCH] fix(Tabs): scroll position when using nav-bottom slot
 (#11115)

---
 .../icon/test/__snapshots__/demo.spec.ts.snap | 104 +++---
 .../tab/test/__snapshots__/demo.spec.ts.snap  | 296 +++++++++---------
 packages/vant/src/tabs/Tabs.tsx               |  20 +-
 3 files changed, 216 insertions(+), 204 deletions(-)

diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
index db4d7d864..8f404404e 100644
--- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
@@ -4,58 +4,60 @@ exports[`should render demo and match snapshot 1`] = `
 <div class="van-tabs van-tabs--line">
   <div>
     <div class="van-sticky">
-      <div class="van-tabs__wrap">
-        <div role="tablist"
-             class="van-tabs__nav van-tabs__nav--line"
-             aria-orientation="horizontal"
-        >
-          <div id="van-tabs-0"
-               role="tab"
-               class="van-tab van-tab--line van-tab--active"
-               tabindex="0"
-               aria-selected="true"
-               aria-controls="van-tab"
-          >
-            <span class="van-tab__text van-tab__text--ellipsis">
-              Demo
-            </span>
-          </div>
-          <div id="van-tabs-1"
-               role="tab"
-               class="van-tab van-tab--line"
-               tabindex="-1"
-               aria-selected="false"
-               aria-controls="van-tab"
-          >
-            <span class="van-tab__text van-tab__text--ellipsis">
-              Basic
-            </span>
-          </div>
-          <div id="van-tabs-2"
-               role="tab"
-               class="van-tab van-tab--line"
-               tabindex="-1"
-               aria-selected="false"
-               aria-controls="van-tab"
-          >
-            <span class="van-tab__text van-tab__text--ellipsis">
-              Outline
-            </span>
-          </div>
-          <div id="van-tabs-3"
-               role="tab"
-               class="van-tab van-tab--line"
-               tabindex="-1"
-               aria-selected="false"
-               aria-controls="van-tab"
-          >
-            <span class="van-tab__text van-tab__text--ellipsis">
-              Filled
-            </span>
-          </div>
-          <div class="van-tabs__line"
-               style="transform: translateX(50px) translateX(-50%);"
+      <div>
+        <div class="van-tabs__wrap">
+          <div role="tablist"
+               class="van-tabs__nav van-tabs__nav--line"
+               aria-orientation="horizontal"
           >
+            <div id="van-tabs-0"
+                 role="tab"
+                 class="van-tab van-tab--line van-tab--active"
+                 tabindex="0"
+                 aria-selected="true"
+                 aria-controls="van-tab"
+            >
+              <span class="van-tab__text van-tab__text--ellipsis">
+                Demo
+              </span>
+            </div>
+            <div id="van-tabs-1"
+                 role="tab"
+                 class="van-tab van-tab--line"
+                 tabindex="-1"
+                 aria-selected="false"
+                 aria-controls="van-tab"
+            >
+              <span class="van-tab__text van-tab__text--ellipsis">
+                Basic
+              </span>
+            </div>
+            <div id="van-tabs-2"
+                 role="tab"
+                 class="van-tab van-tab--line"
+                 tabindex="-1"
+                 aria-selected="false"
+                 aria-controls="van-tab"
+            >
+              <span class="van-tab__text van-tab__text--ellipsis">
+                Outline
+              </span>
+            </div>
+            <div id="van-tabs-3"
+                 role="tab"
+                 class="van-tab van-tab--line"
+                 tabindex="-1"
+                 aria-selected="false"
+                 aria-controls="van-tab"
+            >
+              <span class="van-tab__text van-tab__text--ellipsis">
+                Filled
+              </span>
+            </div>
+            <div class="van-tabs__line"
+                 style="transform: translateX(50px) translateX(-50%);"
+            >
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
index e07d81012..4d6653b39 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
@@ -546,58 +546,60 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div>
       <div class="van-sticky">
-        <div class="van-tabs__wrap">
-          <div role="tablist"
-               class="van-tabs__nav van-tabs__nav--line"
-               aria-orientation="horizontal"
-          >
-            <div id="van-tabs-0"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--active"
-                 tabindex="0"
-                 aria-selected="true"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text van-tab__text--ellipsis">
-                Tab 1
-              </span>
-            </div>
-            <div id="van-tabs-1"
-                 role="tab"
-                 class="van-tab van-tab--line"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text van-tab__text--ellipsis">
-                Tab 2
-              </span>
-            </div>
-            <div id="van-tabs-2"
-                 role="tab"
-                 class="van-tab van-tab--line"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text van-tab__text--ellipsis">
-                Tab 3
-              </span>
-            </div>
-            <div id="van-tabs-3"
-                 role="tab"
-                 class="van-tab van-tab--line"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text van-tab__text--ellipsis">
-                Tab 4
-              </span>
-            </div>
-            <div class="van-tabs__line"
-                 style="transform: translateX(50px) translateX(-50%);"
+        <div>
+          <div class="van-tabs__wrap">
+            <div role="tablist"
+                 class="van-tabs__nav van-tabs__nav--line"
+                 aria-orientation="horizontal"
             >
+              <div id="van-tabs-0"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--active"
+                   tabindex="0"
+                   aria-selected="true"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text van-tab__text--ellipsis">
+                  Tab 1
+                </span>
+              </div>
+              <div id="van-tabs-1"
+                   role="tab"
+                   class="van-tab van-tab--line"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text van-tab__text--ellipsis">
+                  Tab 2
+                </span>
+              </div>
+              <div id="van-tabs-2"
+                   role="tab"
+                   class="van-tab van-tab--line"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text van-tab__text--ellipsis">
+                  Tab 3
+                </span>
+              </div>
+              <div id="van-tabs-3"
+                   role="tab"
+                   class="van-tab van-tab--line"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text van-tab__text--ellipsis">
+                  Tab 4
+                </span>
+              </div>
+              <div class="van-tabs__line"
+                   style="transform: translateX(50px) translateX(-50%);"
+              >
+              </div>
             </div>
           </div>
         </div>
@@ -1096,102 +1098,104 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs van-tabs--line">
     <div>
       <div class="van-sticky">
-        <div class="van-tabs__wrap">
-          <div role="tablist"
-               class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
-               aria-orientation="horizontal"
-          >
-            <div id="van-tabs-0"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow van-tab--active"
-                 tabindex="0"
-                 aria-selected="true"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 1
-              </span>
-            </div>
-            <div id="van-tabs-1"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 2
-              </span>
-            </div>
-            <div id="van-tabs-2"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 3
-              </span>
-            </div>
-            <div id="van-tabs-3"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 4
-              </span>
-            </div>
-            <div id="van-tabs-4"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 5
-              </span>
-            </div>
-            <div id="van-tabs-5"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 6
-              </span>
-            </div>
-            <div id="van-tabs-6"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 7
-              </span>
-            </div>
-            <div id="van-tabs-7"
-                 role="tab"
-                 class="van-tab van-tab--line van-tab--grow"
-                 tabindex="-1"
-                 aria-selected="false"
-                 aria-controls="van-tab"
-            >
-              <span class="van-tab__text">
-                Tab 8
-              </span>
-            </div>
-            <div class="van-tabs__line"
-                 style="transform: translateX(50px) translateX(-50%);"
+        <div>
+          <div class="van-tabs__wrap">
+            <div role="tablist"
+                 class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+                 aria-orientation="horizontal"
             >
+              <div id="van-tabs-0"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow van-tab--active"
+                   tabindex="0"
+                   aria-selected="true"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 1
+                </span>
+              </div>
+              <div id="van-tabs-1"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 2
+                </span>
+              </div>
+              <div id="van-tabs-2"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 3
+                </span>
+              </div>
+              <div id="van-tabs-3"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 4
+                </span>
+              </div>
+              <div id="van-tabs-4"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 5
+                </span>
+              </div>
+              <div id="van-tabs-5"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 6
+                </span>
+              </div>
+              <div id="van-tabs-6"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 7
+                </span>
+              </div>
+              <div id="van-tabs-7"
+                   role="tab"
+                   class="van-tab van-tab--line van-tab--grow"
+                   tabindex="-1"
+                   aria-selected="false"
+                   aria-controls="van-tab"
+              >
+                <span class="van-tab__text">
+                  Tab 8
+                </span>
+              </div>
+              <div class="van-tabs__line"
+                   style="transform: translateX(50px) translateX(-50%);"
+              >
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index d2e5eda8b..bbde8fd20 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@@ -415,10 +415,11 @@ export default defineComponent({
     };
 
     const renderHeader = () => {
-      const { type, border } = props;
-      return (
+      const { type, border, sticky } = props;
+
+      const Header = [
         <div
-          ref={wrapRef}
+          ref={sticky ? undefined : wrapRef}
           class={[
             bem('wrap'),
             { [BORDER_TOP_BOTTOM]: type === 'line' && border },
@@ -439,8 +440,14 @@ export default defineComponent({
             {renderLine()}
             {slots['nav-right']?.()}
           </div>
-        </div>
-      );
+        </div>,
+        slots['nav-bottom']?.(),
+      ];
+
+      if (sticky) {
+        return <div ref={wrapRef}>{Header}</div>;
+      }
+      return Header;
     };
 
     watch([() => props.color, windowWidth], setLine);
@@ -517,10 +524,9 @@ export default defineComponent({
             onScroll={onStickyScroll}
           >
             {renderHeader()}
-            {slots['nav-bottom']?.()}
           </Sticky>
         ) : (
-          [renderHeader(), slots['nav-bottom']?.()]
+          renderHeader()
         )}
         <TabsContent
           ref={contentRef}