fix: tabbar 某些情况下 setTabBarBadge 后出现重复的 badge

packages/uni-h5/src/framework/components/layout/tabBar.tsx

@@ -290,6 +290,7 @@ function createTabBarItemBdTsx(
           )
         : iconPath && createTabBarItemIconTsx(iconPath, tabBarItem, tabBar)}
       {tabBarItem.text && createTabBarItemTextTsx(color, tabBarItem, tabBar)}
+      {tabBarItem.redDot && createTabBarItemRedDotTsx(tabBarItem.badge)}
     </div>
   )
 }
@@ -299,14 +300,13 @@ function createTabBarItemIconTsx(
   tabBarItem: UniApp.TabBarItemOptions,
   tabBar: UniApp.TabBarOptions
 ) {
-  const { type, text, redDot } = tabBarItem
+  const { type, text } = tabBarItem
   const { iconWidth } = tabBar
   const clazz = 'uni-tabbar__icon' + (text ? ' uni-tabbar__icon__diff' : '')
   const style = { width: iconWidth, height: iconWidth }
   return (
     <div class={clazz} style={style}>
       {type !== 'midButton' && <img src={getRealPath(iconPath)} />}
-      {redDot && createTabBarItemRedDotTsx(tabBarItem.badge)}
     </div>
   )
 }
@@ -317,7 +317,7 @@ function createTabBarItemIconfontTsx(
   tabBarItem: UniApp.TabBarItemOptions,
   tabBar: UniApp.TabBarOptions
 ) {
-  const { type, text, redDot } = tabBarItem
+  const { type, text } = tabBarItem
   const { iconWidth } = tabBar
   const clazz = 'uni-tabbar__icon' + (text ? ' uni-tabbar__icon__diff' : '')
   const style = { width: iconWidth, height: iconWidth }
@@ -332,7 +332,6 @@ function createTabBarItemIconfontTsx(
           {iconfontText}
         </div>
       )}
-      {redDot && createTabBarItemRedDotTsx(tabBarItem.badge)}
     </div>
   )
 }
@@ -342,7 +341,7 @@ function createTabBarItemTextTsx(
   tabBarItem: UniApp.TabBarItemOptions,
   tabBar: UniApp.TabBarOptions
 ) {
-  const { redDot, iconPath, text } = tabBarItem
+  const { iconPath, text } = tabBarItem
   const { fontSize, spacing } = tabBar
   const style = {
     color,
@@ -353,7 +352,6 @@ function createTabBarItemTextTsx(
   return (
     <div class="uni-tabbar__label" style={style}>
       {text}
-      {redDot && !iconPath && createTabBarItemRedDotTsx(tabBarItem.badge)}
     </div>
   )
 }

packages/uni-h5/style/framework/tabBar.css

@@ -104,14 +104,14 @@ uni-tabbar {
 
 .uni-tabbar__reddot {
   position: absolute;
-  top: 0;
+  top: 2px;
   right: 0;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: #f43530;
   color: #ffffff;
-  transform: translate(40%, -20%);
+  transform: translate(40%, 0%);
 }
 
 .uni-tabbar__badge {