From 779125255cb6433820ac78e31c6438bca955010c Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Tue, 15 Apr 2025 13:37:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(tabs):=20=E4=BF=AE=E5=A4=8D=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=A1=E7=AE=97=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AE=9A=E4=BD=8D=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/tabs/demos/h5/demo16.tsx   |  5 +++++
 src/packages/tabs/demos/h5/demo17.tsx   |  2 +-
 src/packages/tabs/demos/taro/demo16.tsx |  5 +++++
 src/packages/tabs/demos/taro/demo17.tsx |  2 +-
 src/packages/tabs/tabs.taro.tsx         | 22 +++++++++++++++++++---
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/packages/tabs/demos/h5/demo16.tsx b/src/packages/tabs/demos/h5/demo16.tsx
index 05a9fc54af..0fba5800e9 100644
--- a/src/packages/tabs/demos/h5/demo16.tsx
+++ b/src/packages/tabs/demos/h5/demo16.tsx
@@ -16,6 +16,11 @@ const Demo16 = () => {
         <Tabs.TabPane title="百亿补贴">百亿补贴</Tabs.TabPane>
         <Tabs.TabPane title="今日聚超值">今日聚超值</Tabs.TabPane>
         <Tabs.TabPane title="真好真便宜">真好真便宜</Tabs.TabPane>
+        <Tabs.TabPane title="限时秒杀">限时秒杀</Tabs.TabPane>
+        <Tabs.TabPane title="品牌特惠">品牌特惠</Tabs.TabPane>
+        <Tabs.TabPane title="折扣专区">折扣专区</Tabs.TabPane>
+        <Tabs.TabPane title="新品首发">新品首发</Tabs.TabPane>
+        <Tabs.TabPane title="热销榜单">热销榜单</Tabs.TabPane>
       </Tabs>
     </>
   )
diff --git a/src/packages/tabs/demos/h5/demo17.tsx b/src/packages/tabs/demos/h5/demo17.tsx
index 801ba343f1..1cbbd2ce5e 100644
--- a/src/packages/tabs/demos/h5/demo17.tsx
+++ b/src/packages/tabs/demos/h5/demo17.tsx
@@ -3,7 +3,7 @@ import { Tabs } from '@nutui/nutui-react'
 
 const Demo17 = () => {
   const [tabvalue, setTabvalue] = useState<number | string>('0')
-  const list = Array.from(new Array(10).keys())
+  const list = Array.from(new Array(20).keys())
   return (
     <>
       <Tabs
diff --git a/src/packages/tabs/demos/taro/demo16.tsx b/src/packages/tabs/demos/taro/demo16.tsx
index 8780ca3b19..a63a3babb4 100644
--- a/src/packages/tabs/demos/taro/demo16.tsx
+++ b/src/packages/tabs/demos/taro/demo16.tsx
@@ -17,6 +17,11 @@ const Demo16 = () => {
         <Tabs.TabPane title="百亿补贴">百亿补贴</Tabs.TabPane>
         <Tabs.TabPane title="今日聚超值">今日聚超值</Tabs.TabPane>
         <Tabs.TabPane title="真好真便宜">真好真便宜</Tabs.TabPane>
+        <Tabs.TabPane title="限时秒杀">限时秒杀</Tabs.TabPane>
+        <Tabs.TabPane title="品牌特惠">品牌特惠</Tabs.TabPane>
+        <Tabs.TabPane title="折扣专区">折扣专区</Tabs.TabPane>
+        <Tabs.TabPane title="新品首发">新品首发</Tabs.TabPane>
+        <Tabs.TabPane title="热销榜单">热销榜单</Tabs.TabPane>
       </Tabs>
     </>
   )
diff --git a/src/packages/tabs/demos/taro/demo17.tsx b/src/packages/tabs/demos/taro/demo17.tsx
index e0c4b01bfa..13da8b81be 100644
--- a/src/packages/tabs/demos/taro/demo17.tsx
+++ b/src/packages/tabs/demos/taro/demo17.tsx
@@ -4,7 +4,7 @@ import { Text } from '@tarojs/components'
 
 const Demo17 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
-  const list = Array.from(new Array(10).keys())
+  const list = Array.from(new Array(20).keys())
   return (
     <>
       <Tabs
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index cb5b4358f0..3ef8eca775 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -144,7 +144,7 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
   const scrollIntoView = (index: number) => {
     raf(() => {
       Promise.all([
-        getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
+        getRect(`#nut-tabs-titles-${name || uuid}`),
         getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`),
       ]).then(([navRect, titleRects]: any) => {
         const titleRect = titleRects[index]
@@ -152,16 +152,32 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
 
         let to = 0
         if (direction === 'vertical') {
+          const totalHeight = titleRects.reduce(
+            (sum: number, curr: RectItem) => sum + curr.height,
+            0
+          )
           const top = titleRects
             .slice(0, index)
             .reduce((prev: number, curr: RectItem) => prev + curr.height, 0)
-          to = top - (navRect.height - titleRect.height) / 2
+
+          to = Math.min(
+            Math.max(0, top - (navRect.height - titleRect.height) / 2),
+            totalHeight - navRect.height
+          )
         } else {
+          const totalWidth = titleRects.reduce(
+            (sum: number, curr: RectItem) => sum + curr.width,
+            0
+          )
           const left = titleRects
             .slice(0, index)
             .reduce((prev: number, curr: RectItem) => prev + curr.width, 0)
-          to = left - (navRect.width - titleRect.width) / 2
+          to = Math.min(
+            Math.max(0, left - (navRect.width - titleRect.width) / 2),
+            totalWidth - navRect.width
+          )
         }
+
         scrollDirection(to, direction)
 
         nextTick(() => {