fix: 优化TabBar红点位置 fixed #1111

src/platforms/h5/components/app/tabBar.vue

@@ -10,24 +10,35 @@
         v-for="(item,index) in list"
         :key="item.pagePath"
         class="uni-tabbar__item"
-        @click="_switchTab(item,index)">
+        @click="_switchTab(item,index)"
+      >
         <div class="uni-tabbar__bd">
           <div
             v-if="item.iconPath"
             :class="{'uni-tabbar__icon__diff':!item.text}"
-            class="uni-tabbar__icon">
-            <img :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)">
+            class="uni-tabbar__icon"
+          >
+            <img
+              :src="_getRealPath($route.meta.pagePath===item.pagePath?item.selectedIconPath:item.iconPath)"
+            >
+            <div
+              v-if="item.redDot"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >{{ item.badge }}</div>
           </div>
           <div
             v-if="item.text"
             :style="{color:$route.meta.pagePath===item.pagePath?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
-            class="uni-tabbar__label">
+            class="uni-tabbar__label"
+          >
             {{ item.text }}
+            <div
+              v-if="item.redDot&&!item.iconPath"
+              :class="{'uni-tabbar__badge':!!item.badge}"
+              class="uni-tabbar__reddot"
+            >{{ item.badge }}</div>
           </div>
-          <div
-            v-if="item.redDot"
-            :class="{'uni-tabbar__badge':!!item.badge}"
-            class="uni-tabbar__reddot">{{ item.badge }}</div>
         </div>
       </div>
     </div>
@@ -95,11 +106,11 @@ uni-tabbar .uni-tabbar__icon {
   position: relative;
   display: inline-block;
   margin-top: 5px;
-  width: 27px;
-  height: 27px;
+  width: 24px;
+  height: 24px;
 }
 
-uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff{
+uni-tabbar .uni-tabbar__icon.uni-tabbar__icon__diff {
   margin-top: 0px;
   width: 34px;
   height: 34px;
@@ -128,25 +139,25 @@ uni-tabbar .uni-tabbar-border {
 
 uni-tabbar .uni-tabbar__reddot {
   position: absolute;
-  top: 6px;
-  left: 16px;
+  top: 0;
+  right: 0;
   width: 12px;
   height: 12px;
-  display: inline-block;
   border-radius: 50%;
   background-color: #f43530;
   color: #ffffff;
+  transform: translate(40%, -20%);
 }
 
 uni-tabbar .uni-tabbar__badge {
-  top: 4px;
-  border-radius: 18px;
-  min-width: 8px;
   width: auto;
-  height: auto;
-  padding: 0.15em 0.5em;
+  height: 16px;
+  line-height: 16px;
+  border-radius: 16px;
+  min-width: 16px;
+  padding: 0 2px;
   font-size: 12px;
-  line-height: 1.2;
+  text-align: center;
   white-space: nowrap;
 }
 </style>
@@ -219,21 +230,21 @@ export default {
       let url = '/' + pagePath
       if (url === __uniRoutes[0].alias) {
         url = '/'
-      }
-      const detail = {
-        index,
-        text,
-        pagePath
-      }
-      if (this.$route.path !== url) {
-        this.__path__ = this.$route.path
-        uni.switchTab({
-          from: 'tabBar',
-          url,
-          detail
-        })
-      } else {
-        UniServiceJSBridge.emit('onTabItemTap', detail)
+      }
+      const detail = {
+        index,
+        text,
+        pagePath
+      }
+      if (this.$route.path !== url) {
+        this.__path__ = this.$route.path
+        uni.switchTab({
+          from: 'tabBar',
+          url,
+          detail
+        })
+      } else {
+        UniServiceJSBridge.emit('onTabItemTap', detail)
       }
     }
   }