diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 6e386b6808..ee879f5b44 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -255,12 +255,8 @@ plugins: [
 
 #### Indicator
 
-- 移除 `block`，暴露自定义节点
-- 移除 `align`，暴露自定义节点
-- `vertical` 重命名为`direction`，默认值为 `horizontal`，可选 `vertical`
-- 移除 `fillZero`，暴露自定义节点
-- `size` 重命名为 `total`
-- 增加非数字展示，并设置为默认状态
+- type 属性的值调整为 `'anchor'` 或 `'slide'`
+- color 属性的值增加 `'white'`
 
 #### Menu
 
diff --git a/src/config.json b/src/config.json
index 57a6efe126..192fd55625 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1045,6 +1045,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "liukun"
         },
         {
diff --git a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
index 6aef6f06d8..d2f9346040 100644
--- a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
+++ b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`should match snapshot 1`] = `
     class="nut-indicator"
   >
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
   </div>
 </DocumentFragment>
diff --git a/src/packages/indicator/__test__/indicator.spec.tsx b/src/packages/indicator/__test__/indicator.spec.tsx
index 341aaef23c..b0d76e67e6 100644
--- a/src/packages/indicator/__test__/indicator.spec.tsx
+++ b/src/packages/indicator/__test__/indicator.spec.tsx
@@ -17,7 +17,9 @@ test('should be shown when passing size and current', () => {
     </Cell>
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(3)
-  expect(container.querySelectorAll('.nut-indicator-active')).toHaveLength(1)
+  expect(container.querySelectorAll('.nut-indicator-dot-active')).toHaveLength(
+    1
+  )
 })
 
 test('should be shown when custom node', () => {
@@ -41,3 +43,14 @@ test('should be shown when custom node', () => {
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
 })
+
+test('should be shown when slide', () => {
+  const { container } = render(
+    <Cell>
+      <Indicator type="slide" total={6} current={5} />
+    </Cell>
+  )
+  expect(container.querySelectorAll('.nut-indicator-line-active')).toHaveLength(
+    1
+  )
+})
diff --git a/src/packages/indicator/demo.taro.tsx b/src/packages/indicator/demo.taro.tsx
index ee3bb5a491..184068c77b 100644
--- a/src/packages/indicator/demo.taro.tsx
+++ b/src/packages/indicator/demo.taro.tsx
@@ -7,23 +7,31 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -37,6 +45,12 @@ const IndicatorDemo = () => {
         <View className="h2">{translated.basic}</View>
         <Demo1 />
 
+        <View className="h2">{translated.white}</View>
+        <Demo5 />
+
+        <View className="h2">{translated.type}</View>
+        <Demo6 />
+
         <View className="h2">{translated.customNode}</View>
         <Demo2 />
 
diff --git a/src/packages/indicator/demo.tsx b/src/packages/indicator/demo.tsx
index 3e772985ac..1f2695c0af 100644
--- a/src/packages/indicator/demo.tsx
+++ b/src/packages/indicator/demo.tsx
@@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -33,6 +41,12 @@ const IndicatorDemo = () => {
         <h2>{translated.basic}</h2>
         <Demo1 />
 
+        <h2>{translated.white}</h2>
+        <Demo5 />
+
+        <h2>{translated.type}</h2>
+        <Demo6 />
+
         <h2>{translated.customNode}</h2>
         <Demo2 />
 
diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
index 0cedc6cd59..5ba63d1e3c 100644
--- a/src/packages/indicator/demos/h5/demo1.tsx
+++ b/src/packages/indicator/demos/h5/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
@@ -8,10 +8,13 @@ const Demo1 = () => {
         <Indicator total={3} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={1} />
+        <Indicator total={2} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={2} />
+        <Indicator total={2} current={0} direction="vertical" />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={2} current={1} direction="vertical" color="white" />
       </Cell>
     </>
   )
diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
index 66977d59a2..788f2ef46e 100644
--- a/src/packages/indicator/demos/h5/demo4.tsx
+++ b/src/packages/indicator/demos/h5/demo4.tsx
@@ -1,38 +1,61 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Indicator total={6} current={5} direction="vertical">
-        <div
+    <>
+      <Cell>
+        <Indicator total={6} current={5} direction="vertical">
+          <div
+            style={{
+              display: 'inline-block',
+              width: '14px',
+              height: '14px',
+              lineHeight: '14px',
+              textAlign: 'center',
+              fontSize: '12px',
+              color: '#FFFFFF',
+              border: '1px solid #FFFFFF',
+              borderRadius: '50%',
+              margin: '4px',
+              background: `var(--nutui-color-primary)`,
+              boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            }}
+          >
+            {5}
+          </div>
+        </Indicator>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
           style={{
-            display: 'inline-block',
-            width: '14px',
-            height: '14px',
-            lineHeight: '14px',
-            textAlign: 'center',
-            fontSize: '12px',
-            color: '#FFFFFF',
-            border: '1px solid #FFFFFF',
-            borderRadius: '50%',
-            margin: '4px',
-            background: `var(--nutui-color-primary)`,
-            boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            marginLeft: '50px',
           }}
-        >
-          {5}
-        </div>
-      </Indicator>
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
-    </Cell>
+        />
+
+        <Indicator
+          total={6}
+          current={5}
+          direction="vertical"
+          type="slide"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          color="white"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..b4595b4fd0
--- /dev/null
+++ b/src/packages/indicator/demos/h5/demo5.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..2fe8b28862
--- /dev/null
+++ b/src/packages/indicator/demos/h5/demo6.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" direction="vertical" />
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
index bcfa4b0d21..4dfb8e95c0 100644
--- a/src/packages/indicator/demos/taro/demo1.tsx
+++ b/src/packages/indicator/demos/taro/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
@@ -8,10 +8,13 @@ const Demo1 = () => {
         <Indicator total={3} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={1} />
+        <Indicator total={2} current={0} />
       </Cell>
       <Cell>
-        <Indicator total={3} current={2} />
+        <Indicator total={2} current={0} direction="vertical" />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={2} current={1} direction="vertical" color="white" />
       </Cell>
     </>
   )
diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
index 1527d78be1..250e4f4d85 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -1,66 +1,89 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import { harmonyAndRn } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Indicator total={6} current={5} direction="vertical">
-        <View
-          style={
-            !harmonyAndRn()
-              ? {
-                  display: 'inline-block',
-                  width: '14px',
-                  height: '14px',
-                  lineHeight: '14px',
-                  textAlign: 'center',
-                  fontSize: '12px',
-                  color: '#FFFFFF',
-                  border: '1px solid #FFFFFF',
-                  borderRadius: '50%',
-                  margin: '4px',
-                  backgroundColor: 'var(--nutui-color-primary)',
-                  boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
-                }
-              : {
-                  display: 'inline-block',
-                  width: pxTransform(14),
-                  height: pxTransform(14),
-                  lineHeight: pxTransform(14),
-                  textAlign: 'center',
-                  fontSize: pxTransform(12),
-                  color: '#FFFFFF',
-                  borderWidth: 1,
-                  borderColor: '#FFFFFF',
-                  borderRadius: pxTransform(14),
-                  margin: 4,
-                  backgroundColor: '#ff0f23',
-                  // @ts-ignore
-                  shadowColor: '#ff0f23',
-                  shadowOffset: {
-                    width: 0,
-                    height: 0,
-                  },
-                  shadowOpacity: 1,
-                  shadowRadius: 1,
-                }
-          }
-        >
-          {5}
-        </View>
-      </Indicator>
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        style={{
-          marginLeft: 50,
-        }}
-      />
-    </Cell>
+    <>
+      <Cell>
+        <Indicator total={6} current={5} direction="vertical">
+          <View
+            style={
+              !harmonyAndRn()
+                ? {
+                    display: 'inline-block',
+                    width: '14px',
+                    height: '14px',
+                    lineHeight: '14px',
+                    textAlign: 'center',
+                    fontSize: '12px',
+                    color: '#FFFFFF',
+                    border: '1px solid #FFFFFF',
+                    borderRadius: '50%',
+                    margin: '4px',
+                    backgroundColor: 'var(--nutui-color-primary)',
+                    boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+                  }
+                : {
+                    display: 'inline-block',
+                    width: pxTransform(14),
+                    height: pxTransform(14),
+                    lineHeight: pxTransform(14),
+                    textAlign: 'center',
+                    fontSize: pxTransform(12),
+                    color: '#FFFFFF',
+                    borderWidth: 1,
+                    borderColor: '#FFFFFF',
+                    borderRadius: pxTransform(14),
+                    margin: 4,
+                    backgroundColor: '#ff0f23',
+                    // @ts-ignore
+                    shadowColor: '#ff0f23',
+                    shadowOffset: {
+                      width: 0,
+                      height: 0,
+                    },
+                    shadowOpacity: 1,
+                    shadowRadius: 1,
+                  }
+            }
+          >
+            {5}
+          </View>
+        </Indicator>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          style={{
+            marginLeft: 50,
+          }}
+        />
+
+        <Indicator
+          total={6}
+          current={5}
+          direction="vertical"
+          type="slide"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          color="white"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/indicator/demos/taro/demo5.tsx b/src/packages/indicator/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..a7d213f591
--- /dev/null
+++ b/src/packages/indicator/demos/taro/demo5.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/indicator/demos/taro/demo6.tsx b/src/packages/indicator/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..7f282ea05c
--- /dev/null
+++ b/src/packages/indicator/demos/taro/demo6.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" direction="vertical" />
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/indicator/doc.en-US.md b/src/packages/indicator/doc.en-US.md
index 283cd508be..feb5f3d144 100644
--- a/src/packages/indicator/doc.en-US.md
+++ b/src/packages/indicator/doc.en-US.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### White
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### Type
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### Custom Node
 
 :::demo
@@ -51,6 +67,8 @@ import { Indicator } from '@nutui/nutui-react'
 | current | current step | `number` | `0` |
 | total | step total size | `number` | `3` |
 | direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` |
+| color | color | `primary` \| `white` | `primary` |
+| type | interactivity Type | `anchor` \| `slide` | `anchor` |
 
 ## Theming
 
@@ -62,7 +80,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-indicator-color | indicator active color | `$color-primary` |
 | \--nutui-indicator-dot-color | indicator default color | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | indicator dot size | `5px` |
-| \--nutui-indicator-dot-active-size | indicator dot active size | `15px` |
-| \--nutui-indicator-border-radius | indicator active border size | `3px` |
-| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `4px` |
+| \--nutui-indicator-dot-size | indicator dot size | `3px` |
+| \--nutui-indicator-dot-active-size | indicator dot active size | `6px` |
+| \--nutui-indicator-border-radius | indicator active border size | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.md b/src/packages/indicator/doc.md
index c255a685b8..16ce2c1dbe 100644
--- a/src/packages/indicator/doc.md
+++ b/src/packages/indicator/doc.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定义节点
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| current | 当前步骤 | `number` | `0` |
-| total | 步骤长度 | `number` | `3` |
-| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 当前页 | `number` | `0` |
+| total | 总页数 | `number` | `2` |
+| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 颜色 | `primary` \| `white` | `primary` |
+| type | 交互类型 | `anchor` \| `slide` | `anchor` |
 
 ## 主题定制
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.taro.md b/src/packages/indicator/doc.taro.md
index 46d29ed51e..7b0331f69b 100644
--- a/src/packages/indicator/doc.taro.md
+++ b/src/packages/indicator/doc.taro.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react-taro'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定义节点
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react-taro'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| current | 当前步骤 | `number` | `0` |
-| total | 步骤长度 | `number` | `3` |
-| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 当前页 | `number` | `0` |
+| total | 总页数 | `number` | `2` |
+| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 颜色 | `primary` \| `white` | `primary` |
+| type | 交互类型 | `anchor` \| `slide` | `anchor` |
 
 ## 主题定制
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.zh-TW.md b/src/packages/indicator/doc.zh-TW.md
index 65ef6fe486..0d170f68a4 100644
--- a/src/packages/indicator/doc.zh-TW.md
+++ b/src/packages/indicator/doc.zh-TW.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定義節點
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react'
 
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
-| current | 當前步驟 | `number` | `0` |
-| total | 步驟長度 | `number` | `3` |
-| direction | 展示方向，默認為水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 目前頁 | `number` | `0` |
+| total | 總頁數 | `number` | `2` |
+| direction | 方向，預設為水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 顏色 | `primary` \| `white` | `primary` |
+| type | 互動類型 | `anchor` \| `slide` | `anchor` |
 
 ## 主題定製
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦點時色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默認色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 6b66b4d9a4..6272f82c1b 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -1,19 +1,24 @@
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 
-  &-dot {
+  &-fixed-width {
+    width: 21px;
+  }
+
+  &-dot,
+  &-line {
     display: inline-block;
     vertical-align: middle;
     width: $indicator-dot-size;
     height: $indicator-dot-size;
     border-radius: 50%;
-    background-color: $indicator-dot-color;
+    background-color: $color-border-disabled;
     margin: 0 $indicator-dot-margin;
+    opacity: 0.4;
 
     &:first-child {
       margin-left: 0px;
@@ -22,20 +27,119 @@
     &:last-child {
       margin-right: 0px;
     }
+
+    &-active {
+      width: $indicator-dot-active-size;
+      border-radius: $indicator-border-radius;
+      background: $indicator-color;
+      opacity: 1;
+    }
+  }
+
+  // 固定宽度
+  &-fixed-width {
+    // 两个页码的时候
+    .nut-indicator-dot {
+      width: 12px;
+      border-radius: $indicator-border-radius;
+
+      &-active {
+        width: 6px;
+      }
+    }
   }
 
-  &-active {
+  &-vertical {
+    // 竖向固定高度
+    &.nut-indicator-fixed-width {
+      justify-content: flex-start;
+      height: 21px;
+      width: auto;
+
+      // 竖向两个页码
+      .nut-indicator-dot {
+        width: 3px;
+        height: 12px;
+        border-radius: $indicator-border-radius;
+
+        &-active {
+          height: 6px;
+        }
+      }
+    }
+  }
+
+  &-line {
     width: $indicator-dot-active-size;
+    margin: 0;
+
     border-radius: $indicator-border-radius;
-    background: $indicator-color;
+    background-color: transparent;
+
+    &-active {
+      transition: transform 0.3s ease-in-out;
+      background: $indicator-color;
+    }
   }
+}
 
-  &-vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.nut-indicator-track {
+  position: relative;
 
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: $indicator-border-radius;
+    background-color: $color-border-disabled;
+    opacity: 0.4;
+  }
+}
+
+.nut-indicator-white {
+  .nut-indicator {
+    &-dot,
+    &-line {
+      position: relative;
+      box-sizing: content-box;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      opacity: 1;
+    }
+
+    &-line {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+    &-dot {
+      &-active {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}
+
+.nut-indicator-track.nut-indicator-white {
+  &:after {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.nut-indicator-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .nut-indicator {
     &-dot {
       margin: $indicator-dot-margin 0;
 
@@ -46,11 +150,20 @@
       &:last-child {
         margin-bottom: 0px;
       }
+
+      &-active {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
+  }
 
-    &-active {
-      width: $indicator-dot-size;
-      height: $indicator-dot-active-size;
+  &.nut-indicator-track {
+    .nut-indicator {
+      &-line {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
   }
 }
diff --git a/src/packages/indicator/indicator.taro.tsx b/src/packages/indicator/indicator.taro.tsx
index 521e21bfb9..87b192b78f 100644
--- a/src/packages/indicator/indicator.taro.tsx
+++ b/src/packages/indicator/indicator.taro.tsx
@@ -1,31 +1,51 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import { View, ViewProps } from '@tarojs/components'
+
+export type IndicatorType = 'anchor' | 'slide'
+export type IndicatorColor = 'primary' | 'white'
 
 export interface IndicatorProps {
   total: number
   current: number
   direction: string
+  color: IndicatorColor
+  type: IndicatorType
 }
+
 const defaultProps = {
-  total: 3,
+  total: 2,
   current: 0,
   direction: 'horizontal',
+  color: 'primary',
+  type: 'anchor',
 } as IndicatorProps
+
 const classPrefix = `nut-indicator`
+
 export const Indicator: FunctionComponent<
-  Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>
+  Partial<IndicatorProps> & ViewProps
 > = (props) => {
-  const { total, current, children, className, direction, style } = {
+  const {
+    color,
+    type,
+    total,
+    current,
+    children,
+    className,
+    direction,
+    ...rest
+  } = {
     ...defaultProps,
     ...props,
   }
   const classes = classNames({
     [`${classPrefix}-vertical`]: direction === 'vertical',
+    [`${classPrefix}-white`]: color === 'white',
+    [`${classPrefix}-track`]: type === 'slide',
   })
-  const classPrefixV =
-    direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix
-  const renderElement = () => {
+
+  const renderDotElement = () => {
     const childs: ReactNode[] = []
     for (let item = 0; item < total; item++) {
       childs.push(
@@ -33,22 +53,51 @@ export const Indicator: FunctionComponent<
           children || (
             <View
               key={item}
-              className={`${classPrefix}-dot ${classPrefix}-active ${classPrefixV}-dot ${classPrefixV}-active`}
+              className={`${classPrefix}-dot ${classPrefix}-dot-active`}
             />
           )
         ) : (
-          <View
-            key={item}
-            className={`${classPrefix}-dot ${classPrefixV}-dot`}
-          />
+          <View key={item} className={`${classPrefix}-dot`} />
         )
       )
     }
     return childs
   }
+  const renderLineElement = () => {
+    const trackWidth: number = 21
+    const sliderWidth: number = 6
+    const stride = (trackWidth - sliderWidth) / (total - 1)
+    return (
+      <View
+        style={{
+          transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * stride}px)`,
+        }}
+        className={`${classPrefix}-line ${classPrefix}-line-active`}
+      />
+    )
+  }
+  const renderByType = (type: IndicatorType) => {
+    switch (type) {
+      case 'slide':
+        return renderLineElement()
+      default:
+        return renderDotElement()
+    }
+  }
+
+  function maybeFixedWidth() {
+    if (total === 2 || type === 'slide') {
+      return `${classPrefix}-fixed-width`
+    }
+    return ''
+  }
+
   return (
-    <View className={classNames(classPrefix, classes, className)} style={style}>
-      {renderElement()}
+    <View
+      className={classNames(classPrefix, classes, maybeFixedWidth(), className)}
+      {...rest}
+    >
+      {renderByType(type)}
     </View>
   )
 }
diff --git a/src/packages/indicator/indicator.tsx b/src/packages/indicator/indicator.tsx
index 75160d621b..eba34461ca 100644
--- a/src/packages/indicator/indicator.tsx
+++ b/src/packages/indicator/indicator.tsx
@@ -1,15 +1,23 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
 
+export type IndicatorType = 'anchor' | 'slide'
+export type IndicatorColor = 'primary' | 'white'
+
 export interface IndicatorProps {
   total: number
   current: number
   direction: string
+  color: IndicatorColor
+  type: IndicatorType
 }
+
 const defaultProps = {
-  total: 3,
+  total: 2,
   current: 0,
   direction: 'horizontal',
+  color: 'primary',
+  type: 'anchor',
 } as IndicatorProps
 
 const classPrefix = `nut-indicator`
@@ -17,16 +25,26 @@ const classPrefix = `nut-indicator`
 export const Indicator: FunctionComponent<
   Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { total, current, children, className, direction, ...rest } = {
+  const {
+    color,
+    type,
+    total,
+    current,
+    children,
+    className,
+    direction,
+    ...rest
+  } = {
     ...defaultProps,
     ...props,
   }
   const classes = classNames({
     [`${classPrefix}-vertical`]: direction === 'vertical',
+    [`${classPrefix}-white`]: color === 'white',
+    [`${classPrefix}-track`]: type === 'slide',
   })
-  const classPrefixV =
-    direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix
-  const renderElement = () => {
+
+  const renderDotElement = () => {
     const childs: ReactNode[] = []
     for (let item = 0; item < total; item++) {
       childs.push(
@@ -34,22 +52,51 @@ export const Indicator: FunctionComponent<
           children || (
             <div
               key={item}
-              className={`${classPrefix}-dot ${classPrefix}-active ${classPrefixV}-dot ${classPrefixV}-active`}
+              className={`${classPrefix}-dot ${classPrefix}-dot-active`}
             />
           )
         ) : (
-          <div
-            key={item}
-            className={`${classPrefix}-dot ${classPrefixV}-dot`}
-          />
+          <div key={item} className={`${classPrefix}-dot`} />
         )
       )
     }
     return childs
   }
+  const renderLineElement = () => {
+    const trackWidth: number = 21
+    const sliderWidth: number = 6
+    const stride = (trackWidth - sliderWidth) / (total - 1)
+    return (
+      <div
+        style={{
+          transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * stride}px)`,
+        }}
+        className={`${classPrefix}-line ${classPrefix}-line-active`}
+      />
+    )
+  }
+  const renderByType = (type: IndicatorType) => {
+    switch (type) {
+      case 'slide':
+        return renderLineElement()
+      default:
+        return renderDotElement()
+    }
+  }
+
+  function maybeFixedWidth() {
+    if (total === 2 || type === 'slide') {
+      return `${classPrefix}-fixed-width`
+    }
+    return ''
+  }
+
   return (
-    <div className={classNames(classPrefix, classes, className)} {...rest}>
-      {renderElement()}
+    <div
+      className={classNames(classPrefix, classes, maybeFixedWidth(), className)}
+      {...rest}
+    >
+      {renderByType(type)}
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3fd4faf536..631e052b44 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1787,17 +1787,20 @@ $tabs-tabpane-backgroundColor: var(
 ) !default;
 // indicator（✅）
 $indicator-color: var(--nutui-indicator-color, $color-primary) !default;
-$indicator-dot-color: var(
-  --nutui-indicator-dot-color,
-  $color-text-disabled
-) !default;
-$indicator-dot-size: var(--nutui-indicator-dot-size, 4px) !default;
+$indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default;
+$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default;
 $indicator-dot-active-size: var(
   --nutui-indicator-dot-active-size,
-  8px
+  6px
+) !default;
+$indicator-border-radius: var(
+  --nutui-indicator-border-radius,
+  $radius-xxs
+) !default;
+$indicator-dot-margin: var(
+  --nutui-indicator-dot-margin,
+  $spacing-xxxs
 ) !default;
-$indicator-border-radius: var(--nutui-indicator-border-radius, 2px) !default;
-$indicator-dot-margin: var(--nutui-indicator-dot-margin, 2px) !default;
 
 // menu（✅）
 $menu-scroll-fixed-top: var(--nutui-menu-scroll-fixed-top, 0) !default;