fix: 修复从有导航栏跳到无导航栏页面时页面内容跳动的问题

NervJS · Nov 1, 2023 · ca817f9 · ca817f9
1 parent 24b7257
commit ca817f9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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) {