diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js
index 75a37a9422..0a40f43c3a 100644
--- a/scripts/rn/copy-file.js
+++ b/scripts/rn/copy-file.js
@@ -5,7 +5,7 @@ const fse = require('fs-extra')
 const config = require('../../src/config.json')
 const args = process.argv.splice(2)
 
-console.log('rn copy-file.js args',args)
+console.log('rn copy-file.js args', args)
 
 // 已适配组件对象
 const adaptedArray = []
@@ -30,6 +30,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'tabpane',
 ]
 
 // copy文件并增加css引入
diff --git a/scripts/rn/update-taro-entry.js b/scripts/rn/update-taro-entry.js
index f07d389392..82b64dd487 100644
--- a/scripts/rn/update-taro-entry.js
+++ b/scripts/rn/update-taro-entry.js
@@ -35,6 +35,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'tabpane',
 ]
 
 // 更新 app.config.ts 文件
diff --git a/src/config.json b/src/config.json
index 7b9f943fbe..a9a6bf2557 100644
--- a/src/config.json
+++ b/src/config.json
@@ -389,7 +389,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "TabPane",
           "sort": 2,
           "cName": "选项卡切换子组件",
@@ -400,7 +400,7 @@
           "author": "张晶发"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Tabs",
           "type": "component",
           "cName": "选项卡切换",
diff --git a/src/packages/tabs/demo.taro.tsx b/src/packages/tabs/demo.taro.tsx
index de862eaed3..d5fc9d9148 100644
--- a/src/packages/tabs/demo.taro.tsx
+++ b/src/packages/tabs/demo.taro.tsx
@@ -27,6 +27,7 @@ import Demo20 from './demos/taro/demo20'
 import Demo21 from './demos/taro/demo21'
 import Demo22 from './demos/taro/demo22'
 import Demo23 from './demos/taro/demo23'
+import { harmony } from '@/utils/platform-taro'
 
 const TabsDemo = () => {
   const [translated] = useTranslate({
@@ -40,6 +41,7 @@ const TabsDemo = () => {
       title2: '通过 value 匹配',
       title3: '数据异步渲染 3s',
       title4: '数量多,滚动操作',
+      title4_1: '数量多,滚动操作2',
       title5: '左右布局',
       title6: '左右布局-微笑曲线',
       title12: '嵌套布局',
@@ -64,6 +66,7 @@ const TabsDemo = () => {
       title2: 'Match By Value',
       title3: 'Data Is Rendered Asynchronously For 3s',
       title4: 'A Large Number Of Scrolling Operations',
+      title4_1: 'A Large Number Of Scrolling Operations',
       title5: 'Left And Right Layout',
       title6: 'Left And Right Layout - Smile Curve',
       title12: 'Tabs In Tabs',
@@ -108,17 +111,22 @@ const TabsDemo = () => {
         <Demo10 />
         <View className="h2">{translated.title2}</View>
         <Demo11 />
-        <View className="h2">{translated.title14}</View>
-        <Demo12 />
-        <View className="h2">{translated.title10}</View>
-        <Demo13 />
+        {harmony() ? null : (
+          <>
+            <View className="h2">{translated.title14}</View>
+            <Demo12 />
+            <View className="h2">{translated.title10}</View>
+            <Demo13 />
+          </>
+        )}
+
         <View className="h2">{translated.title9}</View>
         <Demo14 />
         <View className="h2">{translated.title3}</View>
         <Demo15 />
         <View className="h2">{translated.title4}</View>
         <Demo16 />
-        <View className="h2">{translated.title4} 2</View>
+        <View className="h2">{translated.title4_1}</View>
         <Demo17 />
         <View className="h2">{translated.title5}</View>
         <Demo18 />
diff --git a/src/packages/tabs/demos/h5/demo1.tsx b/src/packages/tabs/demos/h5/demo1.tsx
index 4c99db304d..bf228781a8 100644
--- a/src/packages/tabs/demos/h5/demo1.tsx
+++ b/src/packages/tabs/demos/h5/demo1.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo10.tsx b/src/packages/tabs/demos/h5/demo10.tsx
index ad6c8d1e78..aad0e8cea9 100644
--- a/src/packages/tabs/demos/h5/demo10.tsx
+++ b/src/packages/tabs/demos/h5/demo10.tsx
@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo10 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="divider"
         align="left"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo11.tsx b/src/packages/tabs/demos/h5/demo11.tsx
index da81377081..192332b2ba 100644
--- a/src/packages/tabs/demos/h5/demo11.tsx
+++ b/src/packages/tabs/demos/h5/demo11.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo11 = () => {
-  const [tab2value, setTab2value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1" value="0">
diff --git a/src/packages/tabs/demos/h5/demo13.tsx b/src/packages/tabs/demos/h5/demo13.tsx
index 83d87c7662..133f026ebd 100644
--- a/src/packages/tabs/demos/h5/demo13.tsx
+++ b/src/packages/tabs/demos/h5/demo13.tsx
@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo13 = () => {
-  const [tab2value, setTab2value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         style={{ position: 'relative', zIndex: 11 }}
         tabStyle={{ position: 'sticky', top: '0px', zIndex: 11 }}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1" value="0">
diff --git a/src/packages/tabs/demos/h5/demo14.tsx b/src/packages/tabs/demos/h5/demo14.tsx
index b1a544f802..63ad8f3db1 100644
--- a/src/packages/tabs/demos/h5/demo14.tsx
+++ b/src/packages/tabs/demos/h5/demo14.tsx
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo14 = () => {
-  const [tab2value, setTab2value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         autoHeight
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1">
diff --git a/src/packages/tabs/demos/h5/demo15.tsx b/src/packages/tabs/demos/h5/demo15.tsx
index 2d4f9c94bf..1a84364d4c 100644
--- a/src/packages/tabs/demos/h5/demo15.tsx
+++ b/src/packages/tabs/demos/h5/demo15.tsx
@@ -2,23 +2,23 @@ import React, { useState, useEffect } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo15 = () => {
-  const [tab3value, setTab3value] = useState<number | string>(0)
-  const [list3, setList3] = useState<number[]>([])
+  const [tabvalue, setTabvalue] = useState<number | string>(0)
+  const [list, setList] = useState<number[]>([])
   useEffect(() => {
     setTimeout(() => {
-      setTab3value(2)
-      setList3([...new Array(3).keys()])
+      setTabvalue(2)
+      setList([...new Array(3).keys()])
     }, 3000)
   }, [])
   return (
     <>
       <Tabs
-        value={tab3value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab3value(value)
+          setTabvalue(value)
         }}
       >
-        {list3.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo16.tsx b/src/packages/tabs/demos/h5/demo16.tsx
index e0f10247c6..05a9fc54af 100644
--- a/src/packages/tabs/demos/h5/demo16.tsx
+++ b/src/packages/tabs/demos/h5/demo16.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo16 = () => {
-  const [tab4value, setTab4value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab4value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo17.tsx b/src/packages/tabs/demos/h5/demo17.tsx
index ce7285600d..801ba343f1 100644
--- a/src/packages/tabs/demos/h5/demo17.tsx
+++ b/src/packages/tabs/demos/h5/demo17.tsx
@@ -2,19 +2,19 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo17 = () => {
-  const [tab4value, setTab4value] = useState<number | string>('0')
-  const list4 = Array.from(new Array(10).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(10).keys())
   return (
     <>
       <Tabs
-        value={tab4value}
+        value={tabvalue}
         style={{ height: '300px' }}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list4.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo18.tsx b/src/packages/tabs/demos/h5/demo18.tsx
index 8a749b8ca4..24610ed704 100644
--- a/src/packages/tabs/demos/h5/demo18.tsx
+++ b/src/packages/tabs/demos/h5/demo18.tsx
@@ -2,19 +2,19 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo18 = () => {
-  const [tab5value, setTab5value] = useState<number | string>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
         style={{ height: '300px' }}
-        value={tab5value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab5value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo19.tsx b/src/packages/tabs/demos/h5/demo19.tsx
index 481dcdee42..301d3f4cf9 100644
--- a/src/packages/tabs/demos/h5/demo19.tsx
+++ b/src/packages/tabs/demos/h5/demo19.tsx
@@ -2,20 +2,20 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo19 = () => {
-  const [tab6value, setTab6value] = useState<number | string>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
         style={{ height: '300px' }}
-        value={tab6value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab6value(value)
+          setTabvalue(value)
         }}
         activeType="smile"
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
             Tab {item}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo2.tsx b/src/packages/tabs/demos/h5/demo2.tsx
index e24c074c52..d6effd9d25 100644
--- a/src/packages/tabs/demos/h5/demo2.tsx
+++ b/src/packages/tabs/demos/h5/demo2.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="smile"
       >
diff --git a/src/packages/tabs/demos/h5/demo20.tsx b/src/packages/tabs/demos/h5/demo20.tsx
index 2b2c7c458c..d8a7199037 100644
--- a/src/packages/tabs/demos/h5/demo20.tsx
+++ b/src/packages/tabs/demos/h5/demo20.tsx
@@ -2,22 +2,22 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo20 = () => {
-  const [tab8value, setTab8value] = useState<number | string>('0')
-  const [tab9value, setTab9value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const [tabvalue1, setTabvalue1] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="horizontal"
           >
diff --git a/src/packages/tabs/demos/h5/demo21.tsx b/src/packages/tabs/demos/h5/demo21.tsx
index df3f25c65e..fb4ce582bf 100644
--- a/src/packages/tabs/demos/h5/demo21.tsx
+++ b/src/packages/tabs/demos/h5/demo21.tsx
@@ -2,22 +2,22 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo21 = () => {
-  const [tab8value, setTab8value] = useState<number | string>('0')
-  const [tab9value, setTab9value] = useState<number | string>('0')
+  const [tabvalue, setTabvalue] = useState<number | string>('0')
+  const [tabvalue1, setTabvalue1] = useState<number | string>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         autoHeight
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="vertical"
           >
diff --git a/src/packages/tabs/demos/h5/demo22.tsx b/src/packages/tabs/demos/h5/demo22.tsx
index 915423fc59..597a8b711a 100644
--- a/src/packages/tabs/demos/h5/demo22.tsx
+++ b/src/packages/tabs/demos/h5/demo22.tsx
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo22 = () => {
-  const [tab11value, setTab11value] = useState<string | number>('0')
-  const [tab12value, setTab12value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const [tabvalue1, setTabvalue1] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab11value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab11value(value)
+          setTabvalue(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '20px' }}
       >
@@ -18,9 +18,9 @@ const Demo22 = () => {
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
       <Tabs
-        value={tab12value}
+        value={tabvalue1}
         onChange={(value) => {
-          setTab12value(value)
+          setTabvalue1(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >
diff --git a/src/packages/tabs/demos/h5/demo23.tsx b/src/packages/tabs/demos/h5/demo23.tsx
index fb193d7379..08cb1fd99e 100644
--- a/src/packages/tabs/demos/h5/demo23.tsx
+++ b/src/packages/tabs/demos/h5/demo23.tsx
@@ -3,8 +3,8 @@ import { Tabs } from '@nutui/nutui-react'
 import { Star } from '@nutui/icons-react'
 
 const Demo23 = () => {
-  const [tab7value, setTab7value] = useState('c1')
-  const list6 = [
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
     {
       title: '自定义 1',
       paneKey: 'c1',
@@ -22,12 +22,12 @@ const Demo23 = () => {
   return (
     <>
       <Tabs
-        value={tab7value}
+        value={tabvalue}
         title={() => {
-          return list6.map((item) => (
+          return list.map((item) => (
             <div
-              onClick={() => setTab7value(item.paneKey)}
-              className={`nut-tabs-titles-item ${tab7value === item.paneKey ? 'nut-tabs-titles-item-active' : ''}`}
+              onClick={() => setTabvalue(item.paneKey)}
+              className={`nut-tabs-titles-item ${tabvalue === item.paneKey ? 'nut-tabs-titles-item-active' : ''}`}
               key={item.paneKey}
             >
               {item.icon || null}
@@ -37,7 +37,7 @@ const Demo23 = () => {
           ))
         }}
       >
-        {list6.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
             {item.title}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo3.tsx b/src/packages/tabs/demos/h5/demo3.tsx
index 4fd622f780..25dfb9c7e3 100644
--- a/src/packages/tabs/demos/h5/demo3.tsx
+++ b/src/packages/tabs/demos/h5/demo3.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="simple"
       >
diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx
index 969e5d2c10..fee79f2f56 100644
--- a/src/packages/tabs/demos/h5/demo4.tsx
+++ b/src/packages/tabs/demos/h5/demo4.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="card"
       >
diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx
index ffdd2f1832..f4834a5111 100644
--- a/src/packages/tabs/demos/h5/demo5.tsx
+++ b/src/packages/tabs/demos/h5/demo5.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo5 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="button"
       >
diff --git a/src/packages/tabs/demos/h5/demo6.tsx b/src/packages/tabs/demos/h5/demo6.tsx
index e218ab08ce..2db225a416 100644
--- a/src/packages/tabs/demos/h5/demo6.tsx
+++ b/src/packages/tabs/demos/h5/demo6.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo6 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         activeType="divider"
       >
diff --git a/src/packages/tabs/demos/h5/demo7.tsx b/src/packages/tabs/demos/h5/demo7.tsx
index 7b92a8a749..57d716eef3 100644
--- a/src/packages/tabs/demos/h5/demo7.tsx
+++ b/src/packages/tabs/demos/h5/demo7.tsx
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo7 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         align="left"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx
index 6143b08bce..63a2a0ef31 100644
--- a/src/packages/tabs/demos/h5/demo8.tsx
+++ b/src/packages/tabs/demos/h5/demo8.tsx
@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo8 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="card"
         align="left"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo9.tsx b/src/packages/tabs/demos/h5/demo9.tsx
index 0471484c6a..0ec02ebfc9 100644
--- a/src/packages/tabs/demos/h5/demo9.tsx
+++ b/src/packages/tabs/demos/h5/demo9.tsx
@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react'
 
 const Demo9 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="button"
         align="left"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx
index f28e4b1c88..b6cfd987d6 100644
--- a/src/packages/tabs/demos/taro/demo1.tsx
+++ b/src/packages/tabs/demos/taro/demo1.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
     >
       <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo10.tsx b/src/packages/tabs/demos/taro/demo10.tsx
index 20cda2a1a3..bf03ee04d9 100644
--- a/src/packages/tabs/demos/taro/demo10.tsx
+++ b/src/packages/tabs/demos/taro/demo10.tsx
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="divider"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         align="left"
       >
diff --git a/src/packages/tabs/demos/taro/demo11.tsx b/src/packages/tabs/demos/taro/demo11.tsx
index ef546e76eb..b24a84a74c 100644
--- a/src/packages/tabs/demos/taro/demo11.tsx
+++ b/src/packages/tabs/demos/taro/demo11.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo11 = () => {
-  const [tab2value, setTab2value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1" value="0">
diff --git a/src/packages/tabs/demos/taro/demo12.tsx b/src/packages/tabs/demos/taro/demo12.tsx
index f30cc8b36e..38f6ce8e18 100644
--- a/src/packages/tabs/demos/taro/demo12.tsx
+++ b/src/packages/tabs/demos/taro/demo12.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'
 import { View } from '@tarojs/components'
 import { Tabs, Swiper } from '@nutui/nutui-react-taro'
 
+// TODO：鸿蒙支持的不好
 const Demo12 = () => {
   const swiperRef = useRef<React.ElementRef<typeof Swiper> | null>(null)
   const [tabIndex, setTabIndex] = useState<string | number>(0)
diff --git a/src/packages/tabs/demos/taro/demo13.tsx b/src/packages/tabs/demos/taro/demo13.tsx
index 475786e378..3bd2a2b201 100644
--- a/src/packages/tabs/demos/taro/demo13.tsx
+++ b/src/packages/tabs/demos/taro/demo13.tsx
@@ -1,36 +1,32 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
+// TODO：鸿蒙支持的不好
 const Demo13 = () => {
-  const [tab2value, setTab2value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
-        tabStyle={{ position: 'sticky', top: '0px', zIndex: 11 }}
+        value={tabvalue}
+        tabStyle={{ position: 'sticky', top: 0, zIndex: 11 }}
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+          {Array(8)
+            .fill(null)
+            .map((_, index) => (
+              <View key={index}>Tab 1</View>
+            ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2">
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
-          <p>Tab 2</p>
+          {Array(8)
+            .fill(null)
+            .map((_, index) => (
+              <View key={index}>Tab 2</View>
+            ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo14.tsx b/src/packages/tabs/demos/taro/demo14.tsx
index 85790f7f6e..5997a4d5a2 100644
--- a/src/packages/tabs/demos/taro/demo14.tsx
+++ b/src/packages/tabs/demos/taro/demo14.tsx
@@ -1,22 +1,25 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
+// TODO：鸿蒙支持的不好
 const Demo14 = () => {
-  const [tab2value, setTab2value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab2value}
+        value={tabvalue}
         autoHeight
         onChange={(value) => {
-          setTab2value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="Tab 1">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+          {Array(8)
+            .fill(null)
+            .map((_, index) => (
+              <View key={index}>Tab 1</View>
+            ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo15.tsx b/src/packages/tabs/demos/taro/demo15.tsx
index 9921da7f56..f0eed62356 100644
--- a/src/packages/tabs/demos/taro/demo15.tsx
+++ b/src/packages/tabs/demos/taro/demo15.tsx
@@ -1,26 +1,27 @@
 import React, { useState, useEffect } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
 
 const Demo15 = () => {
-  const [tab3value, setTab3value] = useState<string | number>(0)
-  const [list3, setList3] = useState<number[]>([])
+  const [tabvalue, setTabvalue] = useState<string | number>(0)
+  const [list, setlist] = useState<number[]>([])
   useEffect(() => {
     setTimeout(() => {
-      setTab3value(2)
-      setList3([...new Array(3).keys()])
+      setTabvalue(2)
+      setlist([...new Array(3).keys()])
     }, 3000)
   }, [])
   return (
     <>
       <Tabs
-        value={tab3value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab3value(value)
+          setTabvalue(value)
         }}
       >
-        {list3.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
-            Tab {item}
+            <Text>Tab {item}</Text>
           </Tabs.TabPane>
         ))}
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo16.tsx b/src/packages/tabs/demos/taro/demo16.tsx
index 2d6f90deb2..8780ca3b19 100644
--- a/src/packages/tabs/demos/taro/demo16.tsx
+++ b/src/packages/tabs/demos/taro/demo16.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
+// TODO：鸿蒙支持的不好
 const Demo16 = () => {
-  const [tab4value, setTab4value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab4value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
       >
         <Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo17.tsx b/src/packages/tabs/demos/taro/demo17.tsx
index 72b6b5139e..e0c4b01bfa 100644
--- a/src/packages/tabs/demos/taro/demo17.tsx
+++ b/src/packages/tabs/demos/taro/demo17.tsx
@@ -1,22 +1,23 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
 
 const Demo17 = () => {
-  const [tab4value, setTab4value] = useState<string | number>('0')
-  const list4 = Array.from(new Array(10).keys())
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const list = Array.from(new Array(10).keys())
   return (
     <>
       <Tabs
-        value={tab4value}
-        style={{ height: '300px' }}
+        value={tabvalue}
+        style={{ height: 300 }}
         onChange={(value) => {
-          setTab4value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list4.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
-            Tab {item}
+            <Text>Tab {item}</Text>
           </Tabs.TabPane>
         ))}
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo18.tsx b/src/packages/tabs/demos/taro/demo18.tsx
index 35bc59b23c..40a77b57b9 100644
--- a/src/packages/tabs/demos/taro/demo18.tsx
+++ b/src/packages/tabs/demos/taro/demo18.tsx
@@ -1,22 +1,23 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
 
 const Demo18 = () => {
-  const [tab5value, setTab5value] = useState<string | number>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
-        style={{ height: '300px' }}
-        value={tab5value}
+        style={{ height: 300 }}
+        value={tabvalue}
         onChange={(value) => {
-          setTab5value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
-            Tab {item}
+            <Text>Tab {item}</Text>
           </Tabs.TabPane>
         ))}
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo19.tsx b/src/packages/tabs/demos/taro/demo19.tsx
index 04a7dd0328..a739808306 100644
--- a/src/packages/tabs/demos/taro/demo19.tsx
+++ b/src/packages/tabs/demos/taro/demo19.tsx
@@ -1,23 +1,24 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
 
 const Demo19 = () => {
-  const [tab6value, setTab6value] = useState<string | number>('0')
-  const list5 = Array.from(new Array(2).keys())
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const list = Array.from(new Array(2).keys())
   return (
     <>
       <Tabs
-        style={{ height: '300px' }}
-        value={tab6value}
+        style={{ height: 300 }}
+        value={tabvalue}
         onChange={(value) => {
-          setTab6value(value)
+          setTabvalue(value)
         }}
         activeType="smile"
         direction="vertical"
       >
-        {list5.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item} title={`Tab ${item}`}>
-            Tab {item}
+            <Text>Tab {item}</Text>
           </Tabs.TabPane>
         ))}
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo2.tsx b/src/packages/tabs/demos/taro/demo2.tsx
index 51ed281ab1..7a926f283f 100644
--- a/src/packages/tabs/demos/taro/demo2.tsx
+++ b/src/packages/tabs/demos/taro/demo2.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       activeType="smile"
     >
diff --git a/src/packages/tabs/demos/taro/demo20.tsx b/src/packages/tabs/demos/taro/demo20.tsx
index 7395364061..5f906bb8e6 100644
--- a/src/packages/tabs/demos/taro/demo20.tsx
+++ b/src/packages/tabs/demos/taro/demo20.tsx
@@ -2,22 +2,23 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo20 = () => {
-  const [tab8value, setTab8value] = useState<string | number>('0')
-  const [tab9value, setTab9value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const [tabvalue1, setTabvalue1] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        style={{ height: 300 }}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         direction="vertical"
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="horizontal"
           >
diff --git a/src/packages/tabs/demos/taro/demo21.tsx b/src/packages/tabs/demos/taro/demo21.tsx
index 5bf0a7a54b..dc648b01b4 100644
--- a/src/packages/tabs/demos/taro/demo21.tsx
+++ b/src/packages/tabs/demos/taro/demo21.tsx
@@ -2,22 +2,22 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo21 = () => {
-  const [tab8value, setTab8value] = useState<string | number>('0')
-  const [tab9value, setTab9value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
+  const [tabvalue1, setTabvalue1] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab8value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab8value(value)
+          setTabvalue(value)
         }}
         autoHeight
       >
         <Tabs.TabPane title="Tab 1">
           <Tabs
-            value={tab9value}
+            value={tabvalue1}
             onChange={(value) => {
-              setTab9value(value)
+              setTabvalue1(value)
             }}
             direction="vertical"
           >
diff --git a/src/packages/tabs/demos/taro/demo22.tsx b/src/packages/tabs/demos/taro/demo22.tsx
index 20ed7c76fe..42033f9df6 100644
--- a/src/packages/tabs/demos/taro/demo22.tsx
+++ b/src/packages/tabs/demos/taro/demo22.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
+// TODO：鸿蒙支持的不好：自定义变量
 const Demo22 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '20px' }}
       >
@@ -17,9 +18,9 @@ const Demo22 = () => {
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >
diff --git a/src/packages/tabs/demos/taro/demo23.tsx b/src/packages/tabs/demos/taro/demo23.tsx
index 7e25c8d647..26bddf40dc 100644
--- a/src/packages/tabs/demos/taro/demo23.tsx
+++ b/src/packages/tabs/demos/taro/demo23.tsx
@@ -4,8 +4,8 @@ import { Tabs } from '@nutui/nutui-react-taro'
 import { Star } from '@nutui/icons-react-taro'
 
 const Demo23 = () => {
-  const [tab7value, setTab7value] = useState('c1')
-  const list6 = [
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
     {
       title: '自定义 1',
       paneKey: 'c1',
@@ -23,22 +23,22 @@ const Demo23 = () => {
   return (
     <>
       <Tabs
-        value={tab7value}
+        value={tabvalue}
         title={() => {
-          return list6.map((item) => (
+          return list.map((item) => (
             <View
-              onClick={() => setTab7value(item.paneKey)}
-              className={`nut-tabs-titles-item ${tab7value === item.paneKey ? 'nut-tabs-titles-item-active' : ''}`}
+              onClick={() => setTabvalue(item.paneKey)}
+              className={`nut-tabs-titles-item ${tabvalue === item.paneKey ? 'nut-tabs-titles-item-active' : ''}`}
               key={item.paneKey}
             >
-              {item.icon || null}
+              {item.icon}
               <Text className="nut-tabs-titles-item-text">{item.title}</Text>
               <Text className="nut-tabs-titles-item-line" />
             </View>
           ))
         }}
       >
-        {list6.map((item) => (
+        {list.map((item) => (
           <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
             {item.title}
           </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo3.tsx b/src/packages/tabs/demos/taro/demo3.tsx
index ef31fa2c7d..5047c16d80 100644
--- a/src/packages/tabs/demos/taro/demo3.tsx
+++ b/src/packages/tabs/demos/taro/demo3.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       activeType="simple"
     >
diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx
index e52b95d172..7fae3ebf8e 100644
--- a/src/packages/tabs/demos/taro/demo4.tsx
+++ b/src/packages/tabs/demos/taro/demo4.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       activeType="card"
     >
diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx
index 9d220b42ad..507824786d 100644
--- a/src/packages/tabs/demos/taro/demo5.tsx
+++ b/src/packages/tabs/demos/taro/demo5.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       activeType="button"
     >
diff --git a/src/packages/tabs/demos/taro/demo6.tsx b/src/packages/tabs/demos/taro/demo6.tsx
index fac49ec462..9f23d646d9 100644
--- a/src/packages/tabs/demos/taro/demo6.tsx
+++ b/src/packages/tabs/demos/taro/demo6.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       activeType="divider"
     >
diff --git a/src/packages/tabs/demos/taro/demo7.tsx b/src/packages/tabs/demos/taro/demo7.tsx
index 259657d358..edf764e65e 100644
--- a/src/packages/tabs/demos/taro/demo7.tsx
+++ b/src/packages/tabs/demos/taro/demo7.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo7 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       align="left"
     >
diff --git a/src/packages/tabs/demos/taro/demo8.tsx b/src/packages/tabs/demos/taro/demo8.tsx
index 49e3588b72..bee10004af 100644
--- a/src/packages/tabs/demos/taro/demo8.tsx
+++ b/src/packages/tabs/demos/taro/demo8.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
-      value={tab1value}
+      value={tabvalue}
       activeType="card"
       onChange={(value) => {
-        setTab1value(value)
+        setTabvalue(value)
       }}
       align="left"
     >
diff --git a/src/packages/tabs/demos/taro/demo9.tsx b/src/packages/tabs/demos/taro/demo9.tsx
index 9bf81d3beb..08b9b30cc4 100644
--- a/src/packages/tabs/demos/taro/demo9.tsx
+++ b/src/packages/tabs/demos/taro/demo9.tsx
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
 
 const Demo9 = () => {
-  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <>
       <Tabs
-        value={tab1value}
+        value={tabvalue}
         activeType="button"
         onChange={(value) => {
-          setTab1value(value)
+          setTabvalue(value)
         }}
         align="left"
       >
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index e5c4a3a834..bc5b73e829 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -5,12 +5,17 @@
   display: flex;
 }
 
+.nut-tabs-horizontal {
+  flex-direction: column;
+}
+
 .nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
   height: $tabs-titles-height;
   user-select: none;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   background: $tabs-titles-background-color;
   scrollbar-width: none;
 
@@ -22,7 +27,6 @@
 
   .nut-tabs-list {
     width: 100%;
-    height: auto;
     display: flex;
     flex-shrink: 0;
   }
@@ -41,11 +45,6 @@
     }
   }
 
-  &-scrollable {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
   &-item {
     position: relative;
     display: flex;
@@ -61,13 +60,17 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
+    .nut-icon {
+      color: $tabs-titles-item-color;
+    }
+
     &-left,
     &-right {
       flex: none;
     }
 
     &-text {
-      text-align: center;
+      color: $tabs-titles-item-color;
     }
 
     &-smile,
@@ -77,9 +80,9 @@
       width: 0;
       height: 0;
       content: ' ';
-      bottom: $tabs-tab-line-bottom;
       left: 50%;
       transform: translate(-50%, 0);
+      bottom: $tabs-tab-line-bottom;
       border-radius: $tabs-tab-line-border-radius;
       opacity: $tabs-tab-line-opacity;
       overflow: hidden;
@@ -93,13 +96,18 @@
         font-size: 20px;
         width: 100%;
         height: 100%;
-        color: $color-primary;
       }
     }
 
     &-active {
-      color: $tabs-titles-item-active-color;
-      font-weight: $tabs-titles-item-active-font-weight;
+      .nut-icon {
+        color: $tabs-titles-item-active-color;
+      }
+
+      .nut-tabs-titles-item-text {
+        color: $tabs-titles-item-active-color;
+        font-weight: $tabs-titles-item-active-font-weight;
+      }
 
       .nut-tabs-titles-item-line {
         overflow: unset;
@@ -113,18 +121,33 @@
         overflow: unset;
         width: 40px;
         height: 20px;
+
+        .nut-icon {
+          color: $tabs-titles-item-active-color;
+        }
       }
     }
 
     &-disabled {
       color: $color-text-disabled;
+      .nut-icon {
+        color: $color-text-disabled;
+      }
+      .nut-tabs-titles-item-text {
+        color: $color-text-disabled;
+      }
     }
   }
 
   &-simple {
-    .nut-tabs-titles-item-active {
-      color: $color-title;
-      font-size: $tabs-titles-item-active-font-size;
+    .nut-tabs-titles-item {
+      &-active {
+        .nut-tabs-titles-item-text,
+        .nut-icon {
+          color: $color-title;
+          font-size: $tabs-titles-item-active-font-size;
+        }
+      }
     }
   }
 
@@ -134,7 +157,6 @@
 
     .nut-tabs-titles-item {
       padding: 0;
-
       &-active {
         font-weight: $font-weight-bold;
         background-color: $white;
@@ -158,11 +180,10 @@
     .nut-tabs-titles-item-active {
       .nut-tabs-titles-item-text {
         background: $color-default-light;
-        color: $color-text;
+        color: $tabs-titles-item-active-color;
         border-radius: $tabs-tab-button-border-radius;
         font-weight: $font-weight-bold;
         background-color: $tabs-tab-button-active-background-color;
-        color: $color-primary;
         border: $tabs-tab-button-active-border;
       }
     }
@@ -196,35 +217,7 @@
   }
 }
 
-[dir='rtl'] .nut-tabs-titles,
-.nut-rtl .nut-tabs-titles {
-  &-item {
-    &-smile,
-    &-line {
-      left: auto;
-      right: 50%;
-      transform: translate(50%, 0);
-    }
-  }
-  &-divider {
-    .nut-tabs-titles-item {
-      &::after {
-        right: auto;
-        left: 0;
-      }
-    }
-  }
-}
-
-.nut-tabs-horizontal {
-  flex-direction: column;
-  position: relative;
-}
-
 .nut-tabs-vertical {
-  flex-direction: row;
-  width: 100%;
-
   .nut-tabs-ellipsis {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -232,47 +225,26 @@
   }
 
   .nut-tabs-titles {
-    box-sizing: border-box;
     flex-direction: column;
     height: 100%;
-    padding: 0;
     width: $tabs-vertical-titles-width;
     flex-shrink: 0;
 
     .nut-tabs-list {
-      width: 100%;
-      display: flex;
       flex-direction: column;
-      flex-shrink: 0;
-    }
-
-    &-line {
-      .nut-tabs-titles-item {
-        padding-left: 14px;
-      }
     }
   }
 
-  .nut-tabs-titles-scrollable {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
   .nut-tabs-titles-item {
     height: $tabs-vertical-titles-item-height;
-    margin: 0;
     flex: none;
 
     &-smile {
-      width: 0;
-      height: 0;
       overflow: hidden;
       transition: width 0.3s ease;
     }
 
     &-line {
-      width: 0;
-      height: 0;
       transform: translate(0, -50%);
       transition: height 0.3s ease;
 
@@ -294,8 +266,6 @@
         right: -12px;
         bottom: -2%;
         left: auto;
-        width: 40px;
-        height: 20px;
         transform: rotate(320deg);
       }
     }
@@ -304,15 +274,13 @@
   .nut-tabs-horizontal {
     .nut-tabs-titles {
       flex-direction: row;
-      overflow-x: auto;
-      overflow-y: hidden;
       height: $tabs-titles-height;
+      width: 100%;
+      padding: 0 !important;
 
       .nut-tabs-list {
-        width: 100%;
-        display: flex;
         flex-direction: row;
-        flex-shrink: 0;
+        height: auto;
       }
     }
 
@@ -326,6 +294,9 @@
       .nut-tabs-titles-item-line {
         left: 50%;
         transform: translate(-50%, 0);
+        width: $tabs-tab-line-width;
+        height: $tabs-tab-line-height;
+        background: $tabs-tab-line-color;
       }
 
       .nut-tabs-titles-item-smile {
@@ -349,32 +320,32 @@
       height: 100%;
     }
   }
+}
 
-  .nut-tabs-horizontal {
-    .nut-tabs-titles {
-      display: flex;
-      flex-direction: row;
-      padding: 0 !important;
-      width: 100%;
-
-      .nut-tabs-titles-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1 0 auto;
+.nut-tabs-content {
+  display: flex;
+  box-sizing: border-box;
 
-        &-active {
-          color: $color-primary;
-          font-weight: $tabs-titles-item-active-font-weight;
-          font-size: $tabs-titles-item-active-font-size;
+  &-wrap {
+    overflow: hidden;
+  }
+}
 
-          .nut-tabs-titles-item-line {
-            content: ' ';
-            width: $tabs-tab-line-width;
-            height: $tabs-tab-line-height;
-            background: $tabs-tab-line-color;
-          }
-        }
+[dir='rtl'] .nut-tabs-titles,
+.nut-rtl .nut-tabs-titles {
+  &-item {
+    &-smile,
+    &-line {
+      left: auto;
+      right: 50%;
+      transform: translate(50%, 0);
+    }
+  }
+  &-divider {
+    .nut-tabs-titles-item {
+      &::after {
+        right: auto;
+        left: 0;
       }
     }
   }
@@ -422,12 +393,3 @@
     }
   }
 }
-
-.nut-tabs-content {
-  display: flex;
-  box-sizing: border-box;
-
-  &-wrap {
-    overflow: hidden;
-  }
-}
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index 6638e50c45..0bd1473574 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -81,7 +81,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
   })
 
   const titleItemsRef = useRef<HTMLDivElement[]>([])
-  const navRef = useRef<HTMLDivElement>(null)
 
   const getTitles = () => {
     const titles: TabsTitle[] = []
@@ -123,7 +122,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
   )
   const classesTitle = classNames(`${classPrefix}-titles`, {
     [`${classPrefix}-titles-${activeType}`]: activeType,
-    [`${classPrefix}-titles-scrollable`]: true,
     [`${classPrefix}-titles-${align}`]: align,
   })
 
@@ -268,7 +266,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
         className={classesTitle}
         style={{ ...tabStyle }}
       >
-        <View className="nut-tabs-list" ref={navRef}>
+        <View className="nut-tabs-list">
           {!!title && typeof title === 'function'
             ? title()
             : titles.current.map((item, index) => {