fix: 初始化滚动到指定项 (#195) (#196)

Co-authored-by: kongjing@dian.so <apple@AppledeMacBook-Pro-2.local>
AntmJS · Mar 7, 2022 · a76eaeb · a76eaeb
1 parent 96bdb08
commit a76eaeb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/vantui-demo/src/pages/tab/index.js b/packages/vantui-demo/src/pages/tab/index.js
@@ -16,7 +16,7 @@ export default class Index extends Component {
     tabs2: [1, 2],
     tabs3: [1, 2, 3, 5, 6],
     tabs4: [1, 2, 3, 4],
-    tabs6: [1, 2, 3, 4, 5, 6],
+    tabs6: [1, 2, 3, 4, 5, 6, 7, 8],
     tabsWithName: [
       { name: 'a', index: 1 },
       { name: 'b', index: 2 },
@@ -80,7 +80,7 @@ export default class Index extends Component {
             </Tabs>
           </DemoBlock>
           <DemoBlock title="横向滚动">
-            <Tabs>
+            <Tabs active={6}>
               {tabs6.map((item, index) => {
                 return (
                   <Tab key={index} title={'标签 ' + item}>

diff --git a/packages/vantui/src/tabs/index.tsx b/packages/vantui/src/tabs/index.tsx
@@ -353,16 +353,23 @@ export function Tabs(props: TabsProps) {
           ),
       }
     })
-    setTimeout(() => {
-      resize()
-      scrollIntoView()
-      if (active !== getCurrentName()) {
-        setCurrentIndexByName(active)
-      }
-    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(
+    function () {
+      setTimeout(() => {
+        resize()
+        scrollIntoView()
+        if (active !== getCurrentName() && !ref.current?.swiping) {
+          setCurrentIndexByName(active)
+        }
+      }, 16)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getCurrentName()],
+  )
+
   useEffect(
     function () {
       resize()