wip: tabBar

packages/uni-h5/dist/uni-h5.esm.js

@@ -11126,7 +11126,7 @@ function createTabBarMidButtonTsx(color, iconPath, midButton, tabBar2, index2, o
     src: getRealPath(iconPath)
   }, null, 12, ["src"])], 4), createTabBarItemBdTsx(color, iconPath, midButton, tabBar2)], 12, ["onClick"]);
 }
-const CSS_VARS = ["--status-bar-height", "--top-window-height", "--window-left", "--window-right", "--window-margin"];
+const CSS_VARS = ["--status-bar-height", "--top-window-height", "--window-left", "--window-right", "--window-margin", "--tab-bar-height"];
 var index$1 = defineComponent({
   name: "Layout",
   setup(props, {
@@ -11138,7 +11138,7 @@ var index$1 = defineComponent({
     __UNI_FEATURE_TOPWINDOW__ && useTopWindow();
     __UNI_FEATURE_LEFTWINDOW__ && useLeftWindow();
     __UNI_FEATURE_RIGHTWINDOW__ && useRightWindow();
-    const showTabBar2 = __UNI_FEATURE_TABBAR__ && useShowTabBar(emit);
+    const showTabBar2 = __UNI_FEATURE_TABBAR__ && useShowTabBar();
     const clazz = useAppClass(showTabBar2);
     return () => {
       const layoutTsx = createLayoutTsx(keepAliveRoute);
@@ -11186,9 +11186,7 @@ function useShowTabBar(emit) {
   const route = useRoute();
   const tabBar2 = useTabBar();
   const showTabBar2 = computed(() => route.meta.isTabBar && tabBar2.shown);
-  watch(showTabBar2, (value) => {
-    emit("change", "showTabBar", value);
-  });
+  updateCssVar("--tab-bar-height", tabBar2.height);
   return showTabBar2;
 }
 function createTabBarTsx(showTabBar2) {

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

@@ -31,6 +31,7 @@ const CSS_VARS = [
   '--window-left',
   '--window-right',
   '--window-margin',
+  '--tab-bar-height',
 ]
 
 export default defineComponent({
@@ -125,9 +126,7 @@ function useShowTabBar(emit: SetupContext<['change']>['emit']) {
   const tabBar = useTabBar()!
   // TODO meida query
   const showTabBar = computed(() => route.meta.isTabBar && tabBar.shown)
-  watch(showTabBar, (value) => {
-    emit('change', 'showTabBar', value)
-  })
+  updateCssVar('--tab-bar-height', tabBar.height!)
   return showTabBar
 }
 

packages/uni-h5/style/tabBar.css

@@ -129,3 +129,31 @@ uni-tabbar {
   bottom: 0;
   background-size: 100% 100%;
 }
+
+.uni-app--showtabbar uni-page-wrapper {
+  display: block;
+  height: calc(100% - var(--tab-bar-height));
+  height: calc(100% - var(--tab-bar-height) - constant(safe-area-inset-bottom));
+  height: calc(100% - var(--tab-bar-height) - env(safe-area-inset-bottom));
+}
+.uni-app--showtabbar uni-page-wrapper::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: var(--tab-bar-height);
+  height: calc(var(--tab-bar-height) + constant(safe-area-inset-bottom));
+  height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
+}
+.uni-app--showtabbar
+  uni-page-head[uni-page-head-type='default']
+  ~ uni-page-wrapper {
+  height: calc(100% - 44px - var(--tab-bar-height));
+  height: calc(
+    100% - 44px - constant(safe-area-inset-top) - var(--tab-bar-height) -
+      constant(safe-area-inset-bottom)
+  );
+  height: calc(
+    100% - 44px - env(safe-area-inset-top) - var(--tab-bar-height) -
+      env(safe-area-inset-bottom)
+  );
+}