fix(tabs): 修复滚动计算问题，优化定位逻辑 (#3183)

Author: Miles-hxy

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>
     </>
   )

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

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>
     </>
   )

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

src/packages/tabs/tabs.taro.tsx

@@ -144,24 +144,40 @@ 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]
         if (!titleRect) return
 
         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(() => {