From ca817f97fb24ea2962f62bee16561bcad4a35059 Mon Sep 17 00:00:00 2001
From: guoenxuan <genxuan_gdx@163.com>
Date: Wed, 1 Nov 2023 11:19:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=8E=E6=9C=89?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E8=B7=B3=E5=88=B0=E6=97=A0=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E9=A1=B5=E9=9D=A2=E6=97=B6=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=B7=B3=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/ui/navigation-bar/index.ts        | 17 +++++++----------
 packages/taro-router/src/router/page.ts       | 19 ++++++++++++-------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/taro-mpharmony/src/api/ui/navigation-bar/index.ts b/packages/taro-mpharmony/src/api/ui/navigation-bar/index.ts
index 4f06a72997d..151b59b15d7 100644
--- a/packages/taro-mpharmony/src/api/ui/navigation-bar/index.ts
+++ b/packages/taro-mpharmony/src/api/ui/navigation-bar/index.ts
@@ -14,19 +14,16 @@ function loadNavigationSytle () {
   }
   // @ts-ignore
   const naviHeight = window.navigationHeight ? window.navigationHeight : 0
-  // 设置transform属性使得页面内position:fixed的元素相对于app元素定位而不是视口(viewport)
+  // 设置transform属性使得页面内position:fixed的元素相对于页面定位而不是视口(viewport)
   const css = `
-.taro_router.taro_navigation {
-  transform: translateZ(0);
-  top: ${naviHeight}px;
-}
-
-.taro-tabbar__container .taro_navigation .taro_page {
-  max-height: calc(100vh - ${naviHeight}px);
+.taro_navigation {
+  display: block;
+  width: 100%;
+  height: ${naviHeight}px;
 }
 
-.taro-tabbar__container .taro_navigation .taro_page.taro_tabbar_page {
-  max-height: calc(100vh - 50px - ${naviHeight}px);
+.taro_navi_page {
+  transform: translateZ(0);
 }`
   addStyle(css)
 }
diff --git a/packages/taro-router/src/router/page.ts b/packages/taro-router/src/router/page.ts
index 1711e8eb364..c6c982461c6 100644
--- a/packages/taro-router/src/router/page.ts
+++ b/packages/taro-router/src/router/page.ts
@@ -101,11 +101,16 @@ export default class PageHandler {
     return style !== 'custom'
   }
 
-  handleNavigationStyle () {
-    const appEl = document.querySelector('.taro_router')
-    this.isDefaultNavigationStyle() ?
-      appEl?.classList.add('taro_navigation') :
-      appEl?.classList.remove('taro_navigation')
+  addBlankNavigationBar (pageEl: HTMLElement | null) {
+    if (this.isDefaultNavigationStyle() && pageEl && !pageEl.querySelector('.taro_navigation')) {
+      const firstChild = pageEl.firstElementChild
+      if (firstChild) {
+        const navigation = document.createElement('div')
+        navigation.classList.add('taro_navigation')
+        firstChild.classList.add('taro_navi_page')
+        pageEl.insertBefore(navigation, firstChild)
+      }
+    }
   }
 
   isSamePage (page?: PageInstance | null) {
@@ -218,6 +223,7 @@ export default class PageHandler {
     let pageEl = this.getPageContainer(page)
     if (pageEl) {
       setDisplay(pageEl)
+      this.addBlankNavigationBar(pageEl)
       this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page')
       this.addAnimation(pageEl, pageNo === 0)
       page.onShow?.()
@@ -226,6 +232,7 @@ export default class PageHandler {
     } else {
       page.onLoad?.(param, () => {
         pageEl = this.getPageContainer(page)
+        this.addBlankNavigationBar(pageEl)
         this.isTabBar(this.pathname) && pageEl?.classList.add('taro_tabbar_page')
         this.addAnimation(pageEl, pageNo === 0)
         this.onReady(page, true)
@@ -234,7 +241,6 @@ export default class PageHandler {
         this.triggerRouterChange()
       })
     }
-    this.handleNavigationStyle()
   }
 
   unload (page?: PageInstance | null, delta = 1, top = false) {
@@ -294,7 +300,6 @@ export default class PageHandler {
         this.triggerRouterChange()
       })
     }
-    this.handleNavigationStyle()
   }
 
   hide (page?: PageInstance | null) {