diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index 9d76d46957..d5a04627fe 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -97,21 +97,6 @@
       .nut-fixednav-list-text {
         font-size: 10px;
       }
-
-      .b {
-        position: absolute;
-        right: 0;
-        top: 1px;
-        height: 14px;
-        line-height: 14px;
-        font-size: 10px;
-        padding: 0 3px;
-        color: white;
-        background: $color-primary;
-        border-radius: 7px;
-        text-align: center;
-        min-width: 12px;
-      }
     }
   }
 
diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
index 14a71ad3d5..1267a0660a 100644
--- a/src/packages/fixednav/fixednav.taro.tsx
+++ b/src/packages/fixednav/fixednav.taro.tsx
@@ -6,6 +6,7 @@ import Overlay from '@/packages/overlay/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { FixedNavProps } from './types.taro'
 import { defaultOverlayProps } from '@/packages/overlay/overlay.taro'
+import Badge from '@/packages/badge/index.taro'
 
 const defaultProps: FixedNavProps = {
   ...defaultOverlayProps,
@@ -58,6 +59,23 @@ export const FixedNav: FunctionComponent<
     className
   )
 
+  const renderListItem = (item: any, index: number) => {
+    return (
+      <View
+        className={`${classPrefix}-list-item`}
+        onClick={(event) => onSelect(item, event as any)}
+        key={item.id || index}
+      >
+        {React.isValidElement(item.icon) ? (
+          item.icon
+        ) : (
+          <img src={item.icon} alt="" />
+        )}
+        <View className={`${classPrefix}-list-text`}>{item.text}</View>
+      </View>
+    )
+  }
+
   return (
     <View
       className={classes}
@@ -78,21 +96,15 @@ export const FixedNav: FunctionComponent<
           <View className={`${classPrefix}-list`}>
             {list.map((item: any, index) => {
               return (
-                <View
-                  className={`${classPrefix}-list-item`}
-                  onClick={(event) => onSelect(item, event as any)}
-                  key={item.id || index}
-                >
-                  {React.isValidElement(item.icon) ? (
-                    item.icon
+                <>
+                  {item.num ? (
+                    <Badge value={item.num} top={8} right={6}>
+                      {renderListItem(item, index)}
+                    </Badge>
                   ) : (
-                    <img src={item.icon} alt="" />
+                    <>{renderListItem(item, index)}</>
                   )}
-                  <View className={`${classPrefix}-list-text`}>
-                    {item.text}
-                  </View>
-                  {item.num && <View className="b">{item.num}</View>}
-                </View>
+                </>
               )
             })}
           </View>
diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx
index 92b61f4ec4..28bc96b8ab 100644
--- a/src/packages/fixednav/fixednav.tsx
+++ b/src/packages/fixednav/fixednav.tsx
@@ -5,6 +5,7 @@ import Overlay from '@/packages/overlay/index'
 import { useConfig } from '@/packages/configprovider'
 import { FixedNavProps } from './types'
 import { defaultOverlayProps } from '@/packages/overlay/overlay'
+import Badge from '@/packages/badge/index'
 
 const defaultProps: FixedNavProps = {
   ...defaultOverlayProps,
@@ -58,6 +59,23 @@ export const FixedNav: FunctionComponent<
     className
   )
 
+  const renderListItem = (item: any, index: number) => {
+    return (
+      <div
+        className={`${classPrefix}-list-item`}
+        onClick={(event) => onSelect(item, event)}
+        key={item.id || index}
+      >
+        {React.isValidElement(item.icon) ? (
+          item.icon
+        ) : (
+          <img src={item.icon} alt="" />
+        )}
+        <div className={`${classPrefix}-list-text`}>{item.text}</div>
+      </div>
+    )
+  }
+
   return (
     <div
       className={classes}
@@ -79,19 +97,15 @@ export const FixedNav: FunctionComponent<
           <div className={`${classPrefix}-list`}>
             {list.map((item: any, index) => {
               return (
-                <div
-                  className={`${classPrefix}-list-item`}
-                  onClick={(event) => onSelect(item, event)}
-                  key={item.id || index}
-                >
-                  {React.isValidElement(item.icon) ? (
-                    item.icon
+                <>
+                  {item.num ? (
+                    <Badge value={item.num} top={8} right={6}>
+                      {renderListItem(item, index)}
+                    </Badge>
                   ) : (
-                    <img src={item.icon} alt="" />
+                    <>{renderListItem(item, index)}</>
                   )}
-                  <div className={`${classPrefix}-list-text`}>{item.text}</div>
-                  {item.num && <div className="b">{item.num}</div>}
-                </div>
+                </>
               )
             })}
           </div>