fix: 🐛 修复tabbar默认shape固定底部安全区无遮挡的问题

Moonofweisheng · Mar 15, 2024 · 03048bb · 03048bb
1 parent 891003c
commit 03048bb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss
@@ -25,9 +25,26 @@
     margin-right: 32rpx;
     border-radius: 999px;
     box-shadow: $-tabbar-box-shadow;
+
+    @include when(fixed) {
+      @include when(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+
   }
 
   @include m(default) {
+
+    @include when(fixed) {
+      @include when(safe) {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+
     @include when(border) {
       @include halfPixelBorder('top');
     }
@@ -39,10 +56,5 @@
     bottom: 0;
     right: 0;
     z-index: 500;
-
-    @include when(safe) {
-      bottom: constant(safe-area-inset-bottom);
-      bottom: env(safe-area-inset-bottom);
-    }
   }
 }
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom }" :style="{ height: addUnit(height) }">
+  <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
     <view
       :class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
         bordered ? 'is-border' : ''