diff --git a/src/config.json b/src/config.json
index 7b054c0244..84a46e709e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -330,7 +330,7 @@
           "taro": true,
           "v15": 100,
           "author": "Ymm0008",
-          "dd": false
+          "dd": true
         },
         {
           "version": "3.0.0",
diff --git a/src/packages/fixednav/__tests__/fixednav.spec.tsx b/src/packages/fixednav/__tests__/fixednav.spec.tsx
index 5f7520d442..dce90d380b 100644
--- a/src/packages/fixednav/__tests__/fixednav.spec.tsx
+++ b/src/packages/fixednav/__tests__/fixednav.spec.tsx
@@ -30,12 +30,16 @@ const list: FixedNavItem[] = [
 
 test('basic usage', () => {
   const { container } = render(<FixedNav list={list} />)
-  expect(container.querySelector('.nut-fixednav')).toHaveClass('right')
+  expect(container.querySelector('.nut-fixednav')).toHaveClass(
+    'nut-fixednav-right'
+  )
 })
 
 test('left nav', () => {
   const { container } = render(<FixedNav list={list} type="left" />)
-  expect(container.querySelector('.nut-fixednav')).toHaveClass('left')
+  expect(container.querySelector('.nut-fixednav')).toHaveClass(
+    'nut-fixednav-left'
+  )
 })
 
 test('should be displayed after setting the un-active-text', () => {
diff --git a/src/packages/fixednav/demo.taro.tsx b/src/packages/fixednav/demo.taro.tsx
index c161ebe614..4a27b8a734 100644
--- a/src/packages/fixednav/demo.taro.tsx
+++ b/src/packages/fixednav/demo.taro.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView } from '@tarojs/components'
+import { harmony } from '@/utils/platform-taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -17,8 +18,8 @@ const FixedNavDemo = () => {
         <Demo2 />
         <Demo3 />
         <Demo4 />
-        {/* <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 --> */}
-        <Demo5 />
+        {/* 配合 Drag 支持拖拽 ，harmony暂不支持 */}
+        {harmony() ? null : <Demo5 />}
       </ScrollView>
     </>
   )
diff --git a/src/packages/fixednav/demos/h5/demo5.tsx b/src/packages/fixednav/demos/h5/demo5.tsx
index 2943f1ec0b..17fdd9b87f 100644
--- a/src/packages/fixednav/demos/h5/demo5.tsx
+++ b/src/packages/fixednav/demos/h5/demo5.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
-import { Drag, FixedNav } from '@nutui/nutui-react'
+import { Drag, FixedNav, useRtl } from '@nutui/nutui-react'
 
 const Demo5 = () => {
+  const rtl = useRtl()
   const list = [
     {
       id: 1,
@@ -37,7 +38,13 @@ const Demo5 = () => {
   }
   return (
     <>
-      <Drag direction="y" style={{ right: '0px', bottom: '240px' }}>
+      <Drag
+        direction="y"
+        style={{
+          ...(rtl ? { left: '0px' } : { right: '0px' }),
+          ...{ bottom: '240px' },
+        }}
+      >
         <FixedNav
           list={list}
           inactiveText="支持拖拽"
diff --git a/src/packages/fixednav/demos/taro/demo1.tsx b/src/packages/fixednav/demos/taro/demo1.tsx
index 1f6253e09d..c68b91cf32 100644
--- a/src/packages/fixednav/demos/taro/demo1.tsx
+++ b/src/packages/fixednav/demos/taro/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { FixedNav, FixedNavItem } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const list = [
@@ -36,17 +37,15 @@ const Demo1 = () => {
     console.log(item, event)
   }
   return (
-    <>
-      <FixedNav
-        list={list}
-        activeText="基础用法"
-        overlay
-        position={{ top: '70px' }}
-        onChange={change}
-        visible={visible}
-        onSelect={selected}
-      />
-    </>
+    <FixedNav
+      list={list}
+      activeText="基础用法"
+      overlay
+      position={{ top: pxTransform(70) }}
+      onChange={change}
+      visible={visible}
+      onSelect={selected}
+    />
   )
 }
 export default Demo1
diff --git a/src/packages/fixednav/demos/taro/demo2.tsx b/src/packages/fixednav/demos/taro/demo2.tsx
index fe8b0a3f29..d874bdb6c1 100644
--- a/src/packages/fixednav/demos/taro/demo2.tsx
+++ b/src/packages/fixednav/demos/taro/demo2.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { FixedNav } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const list = [
@@ -36,18 +37,16 @@ const Demo2 = () => {
     console.log(item, event)
   }
   return (
-    <>
-      <FixedNav
-        list={list}
-        type="left"
-        position={{ top: '140px' }}
-        visible={visible}
-        activeText="左侧收起"
-        inactiveText="左侧展开"
-        onChange={change}
-        onSelect={selected}
-      />
-    </>
+    <FixedNav
+      list={list}
+      type="left"
+      position={{ top: pxTransform(140) }}
+      visible={visible}
+      activeText="左侧收起"
+      inactiveText="左侧展开"
+      onChange={change}
+      onSelect={selected}
+    />
   )
 }
 export default Demo2
diff --git a/src/packages/fixednav/demos/taro/demo3.tsx b/src/packages/fixednav/demos/taro/demo3.tsx
index bc92d8b776..4e91c5f835 100644
--- a/src/packages/fixednav/demos/taro/demo3.tsx
+++ b/src/packages/fixednav/demos/taro/demo3.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { FixedNav } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const list = [
@@ -36,16 +37,14 @@ const Demo3 = () => {
     console.log(item, event)
   }
   return (
-    <>
-      <FixedNav
-        list={list}
-        position={{ top: '210px' }}
-        overlay={false}
-        visible={visible}
-        onChange={change}
-        onSelect={selected}
-      />
-    </>
+    <FixedNav
+      list={list}
+      position={{ top: pxTransform(210) }}
+      overlay={false}
+      visible={visible}
+      onChange={change}
+      onSelect={selected}
+    />
   )
 }
 export default Demo3
diff --git a/src/packages/fixednav/demos/taro/demo4.tsx b/src/packages/fixednav/demos/taro/demo4.tsx
index 65a54d025d..bb600ceaee 100644
--- a/src/packages/fixednav/demos/taro/demo4.tsx
+++ b/src/packages/fixednav/demos/taro/demo4.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { FixedNav } from '@nutui/nutui-react-taro'
 import { Retweet } from '@nutui/icons-react-taro'
+import { View, Text } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   const [visible, setVisible] = useState(false)
@@ -16,7 +18,7 @@ const Demo4 = () => {
   return (
     <>
       <FixedNav
-        position={{ top: '280px' }}
+        position={{ top: pxTransform(280) }}
         type="left"
         visible={visible}
         onChange={change}
@@ -24,17 +26,19 @@ const Demo4 = () => {
         content={
           <>
             <Retweet color="#fff" />
-            <span className="text">{visible ? '自定义开' : '自定义关'}</span>
+            <Text className="text">{visible ? '自定义开' : '自定义关'}</Text>
           </>
         }
       >
-        <ul className="nut-fixednav-list">
-          <li className="nut-fixednav-list-item">1</li>
-          <li className="nut-fixednav-list-item">2</li>
-          <li className="nut-fixednav-list-item">3</li>
-          <li className="nut-fixednav-list-item">4</li>
-          <li className="nut-fixednav-list-item">5</li>
-        </ul>
+        <View className="nut-fixednav-list">
+          {[1, 2, 3, 4, 5].map((item) => {
+            return (
+              <View className="nut-fixednav-list-item" key={item}>
+                {item}
+              </View>
+            )
+          })}
+        </View>
       </FixedNav>
     </>
   )
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index c3b321634b..7c85ede37e 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -6,7 +6,6 @@
   z-index: $fixednav-index;
   display: inline-block;
   height: 50px;
-  right: 0;
 
   &.active {
     .nut-fixednav-btn {
@@ -19,9 +18,9 @@
       transform: translateX(0%) !important;
     }
 
-    &.left {
+    &.nut-fixednav-left {
       .nut-icon {
-        transform: rotate(0deg) !important;
+        transform: rotate(0deg);
       }
     }
   }
@@ -29,13 +28,10 @@
   &-btn {
     box-sizing: border-box;
     position: absolute;
-    right: 0;
-
     z-index: $fixednav-index;
     width: 70px;
     height: 100%;
     background: $fixednav-button-background;
-    border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
@@ -50,33 +46,21 @@
     }
 
     .nut-icon {
-      margin-right: 5px;
-      transition: all 0.3s;
-      transform: rotate(0deg);
       transition: all 0.3s;
     }
   }
 
   &-list {
     position: absolute;
-    right: 0;
-    transform: translateX(100%);
     transition: all 0.5s;
-
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
     background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
-    border-radius: 25px 0px 0px 25px;
     box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
 
-    padding: {
-      left: 20px;
-      right: 80px;
-    }
-
     &-item {
       position: relative;
       flex: 1;
@@ -89,57 +73,77 @@
       flex-shrink: 0;
       color: $fixednav-color;
 
-      img {
-        width: 20px;
-        height: 20px;
-        margin-bottom: 2px;
-      }
-
       .nut-fixednav-list-text {
         font-size: 10px;
       }
     }
+
+    &-image {
+      width: 20px;
+      height: 20px;
+      margin-bottom: 2px;
+    }
   }
 
-  &.left {
-    right: auto;
-    left: 0;
+  &-right {
+    right: 0;
+    .nut-fixednav-btn {
+      right: 0;
+      border-radius: 45px 0px 0px 45px;
+      .nut-icon {
+        margin-right: 5px;
+        transform: rotate(0deg);
+      }
+    }
+    .nut-fixednav-list {
+      right: 0;
+      transform: translateX(100%);
+      border-radius: 25px 0px 0px 25px;
+      padding: {
+        left: 20px;
+        right: 80px;
+      }
+    }
+  }
 
+  &-left {
+    left: 0;
     .nut-fixednav-btn {
       flex-direction: row-reverse;
-      right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
-
       .nut-icon {
-        transform: rotate(180deg);
-        margin-right: 0px;
         margin-left: 5px;
+        transform: rotate(180deg);
       }
     }
 
     .nut-fixednav-list {
       transform: translateX(-100%);
-      right: auto;
+      left: 0;
       border-radius: 0px 25px 25px 0px;
-
       padding: {
         left: 80px;
         right: 20px;
       }
-
-      margin: 0;
     }
   }
 }
 
 [dir='rtl'] .nut-fixednav,
 .nut-rtl .nut-fixednav {
-  right: auto;
-  left: 0;
+  &-right {
+    right: auto;
+    left: 0;
+  }
   &.active {
     .nut-icon {
-      transform: rotate(-180deg);
+      transform: rotate(0deg);
+    }
+    &.nut-fixednav-left {
+      .nut-icon {
+        transform: rotate(-180deg);
+      }
     }
   }
 
@@ -174,7 +178,7 @@
     }
   }
 
-  &.left {
+  &-left {
     left: auto;
     right: 0;
 
diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
index 85581835c8..1074e4951f 100644
--- a/src/packages/fixednav/fixednav.taro.tsx
+++ b/src/packages/fixednav/fixednav.taro.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { ArrowLeft } from '@nutui/icons-react-taro'
-import { View } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import Overlay from '@/packages/overlay/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { TaroFixedNavProps } from '@/types'
@@ -55,7 +55,7 @@ export const FixedNav: FunctionComponent<
     {
       active: visible,
     },
-    type,
+    `${classPrefix}-${type}`,
     className
   )
 
@@ -69,7 +69,7 @@ export const FixedNav: FunctionComponent<
         {React.isValidElement(item.icon) ? (
           item.icon
         ) : (
-          <img src={item.icon} alt="" />
+          <Image src={item.icon} className={`${classPrefix}-list-image`} />
         )}
         <View className={`${classPrefix}-list-text`}>{item.text}</View>
       </View>
diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx
index cc403ed863..281495e5d5 100644
--- a/src/packages/fixednav/fixednav.tsx
+++ b/src/packages/fixednav/fixednav.tsx
@@ -55,7 +55,7 @@ export const FixedNav: FunctionComponent<
     {
       active: visible,
     },
-    type,
+    `${classPrefix}-${type}`,
     className
   )
 
@@ -69,7 +69,7 @@ export const FixedNav: FunctionComponent<
         {React.isValidElement(item.icon) ? (
           item.icon
         ) : (
-          <img src={item.icon} alt="" />
+          <img src={item.icon} alt="" className={`${classPrefix}-list-image`} />
         )}
         <div className={`${classPrefix}-list-text`}>{item.text}</div>
       </div>