From 551cc346ed17441a7160a182e4cdc494847f0a54 Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Thu, 22 Sep 2022 16:28:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20tabbar=20=E6=9F=90=E4=BA=9B=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=20setTabBarBadge=20=E5=90=8E=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=E9=87=8D=E5=A4=8D=E7=9A=84=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uni-h5/src/framework/components/layout/tabBar.tsx  | 10 ++++------
 packages/uni-h5/style/framework/tabBar.css             |  4 ++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/uni-h5/src/framework/components/layout/tabBar.tsx b/packages/uni-h5/src/framework/components/layout/tabBar.tsx
index d8dc6cd2c..d5e9b3d49 100644
--- a/packages/uni-h5/src/framework/components/layout/tabBar.tsx
+++ b/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>
   )
 }
diff --git a/packages/uni-h5/style/framework/tabBar.css b/packages/uni-h5/style/framework/tabBar.css
index c85d12756..eddc1db2e 100644
--- a/packages/uni-h5/style/framework/tabBar.css
+++ b/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 {
-- 
GitLab