feat(h5): topWindow with navigationBar

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

@@ -179,7 +179,7 @@ export default {
       if (newVal) {
         this.$nextTick(this.onTopWindowInit)
       } else {
-        updateCssVar('--window-top', '0px')
+        updateCssVar('--top-window-height', '0px')
       }
     },
     showLeftWindow (newVal, val) {
@@ -198,7 +198,7 @@ export default {
     }
   },
   beforeCreate () {
-    updateCssVar('--window-top', '0px')
+    updateCssVar('--top-window-height', '0px')
     updateCssVar('--window-left', '0px')
     updateCssVar('--window-right', '0px')
   },
@@ -251,7 +251,7 @@ export default {
             if (show) {
               this.$nextTick(this.onTopWindowInit)
             } else {
-              updateCssVar('--window-top', '0px')
+              updateCssVar('--top-window-height', '0px')
             }
           }
         }
@@ -296,7 +296,7 @@ export default {
         windowTopHeight = this.$refs.top.$el.offsetHeight + 'px'
       }
       this.topWindowHeight = windowTopHeight
-      updateCssVar('--window-top', windowTopHeight)
+      updateCssVar('--top-window-height', windowTopHeight)
     },
     onLeftWindowInit () {
       if (!(this.responsive && this.leftWindow)) {
@@ -335,7 +335,7 @@ export default {
   }
 
   uni-top-window+uni-content {
-    height: calc(100vh - var(--window-top));
+    height: calc(100vh - var(--top-window-height));
   }
 
   uni-left-window {

src/platforms/h5/components/page/index.vue

 <template>
   <uni-page :data-page="$route.meta.pagePath">
     <page-head
-      v-if="!showTopWindow && navigationBar.type!=='none'"
+      v-if="navigationBar.type!=='none'"
       v-bind="navigationBar"
     />
     <page-refresh
@@ -241,15 +241,6 @@ export default {
       refreshOptions
     }
   },
-  computed: {
-    showTopWindow () {
-      try {
-        const appLayout = getApp().$children[0].$children[0]
-        return appLayout && appLayout.showTopWindow
-      } catch (e) {}
-      return false
-    }
-  },
   created () {
     const navigationBar = this.navigationBar
     document.title = navigationBar.titleText

src/platforms/h5/components/page/pageHead.vue

@@ -118,7 +118,6 @@
     position: fixed;
     left: var(--window-left);
     right: var(--window-right);
-    top: 0;
     height: 44px;
     height: calc(44px + constant(safe-area-inset-top));
     height: calc(44px + env(safe-area-inset-top));

src/platforms/h5/helpers/get-window-offset.js

@@ -11,8 +11,9 @@ export default function getWindowOffset () {
     const bottom = parseInt((style.getPropertyValue('--window-bottom').match(/\d+/) || ['0'])[0])
     const left = parseInt((style.getPropertyValue('--window-left').match(/\d+/) || ['0'])[0])
     const right = parseInt((style.getPropertyValue('--window-right').match(/\d+/) || ['0'])[0])
+    const topWindowHeight = parseInt((style.getPropertyValue('--top-window-height').match(/\d+/) || ['0'])[0])
     return {
-      top: top ? (top + safeAreaInsets.top) : 0,
+      top: (top ? (top + safeAreaInsets.top) : 0) + (topWindowHeight || 0),
       bottom: bottom ? (bottom + safeAreaInsets.bottom) : 0,
       left: left ? (left + safeAreaInsets.left) : 0,
       right: right ? (right + safeAreaInsets.right) : 0

src/platforms/h5/view/bridge/subscribe/index.js

-import Vue from 'vue'
-
 import {
   isPlainObject,
   supportsPassive
@@ -35,9 +33,7 @@ function updateCssVar (vm) {
     const windowBottom = windowBottomValue && envMethod
       ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
     const style = document.documentElement.style
-    if (!Vue.component('VUniTopWindow') || pageVm.topWindow === false) { // TODO 目前简单处理，只要包含topWindow，则不再更新--window-top
-      style.setProperty('--window-top', windowTop)
-    }
+    style.setProperty('--window-top', `calc(var(--top-window-height) + ${windowTop})`)
     style.setProperty('--window-bottom', windowBottom)
     console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-top=${windowTop}`)
     console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-bottom=${windowBottom}`)