fix: h5 windowTop

packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js

@@ -239,14 +239,6 @@ var VAR_WINDOW_BOTTOM = /var\(--window-bottom\)/gi
 
 
 function processCss(css) {
-	var envMethod = ''
-	envMethod = uni.canIUse('css.constant') ? 'constant' : envMethod
-	envMethod = uni.canIUse('css.env') ? 'env' : envMethod
-	if (envMethod) {
-		css = css.replace(VAR_STATUS_BAR_HEIGHT, envMethod + '(safe-area-inset-top)')
-			.replace(VAR_WINDOW_TOP, 'calc(var(--window-top) + ' + envMethod + '(safe-area-inset-top))')
-			.replace(VAR_WINDOW_BOTTOM, 'calc(var(--window-bottom) + ' + envMethod + '(safe-area-inset-bottom))')
-	}
 	var page = getPage()
 	if (!uni.canIUse('css.var')) { //不支持 css 变量
 		var offset = getWindowOffset()

packages/webpack-uni-pages-loader/lib/platforms/h5.js

@@ -96,9 +96,22 @@ const getPageComponents = function (inputDir, pagesJson) {
     }
 
     let windowTop = 44
-    let pageStyle = Object.assign({}, globalStyle, props)
-    if (pageStyle.navigationStyle === 'custom' || ('titleNView' in pageStyle && (!pageStyle.titleNView || pageStyle.titleNView.type ===
-      'transparent' || pageStyle.titleNView.type === 'float'))) {
+    const pageStyle = Object.assign({}, globalStyle, props)
+    const titleNViewTypeList = {
+      'none': 'default',
+      'auto': 'transparent',
+      'always': 'float'
+    }
+    let titleNView = pageStyle.titleNView
+    titleNView = Object.assign({}, {
+      type: pageStyle.navigationStyle === 'custom' ? 'none' : 'default'
+    }, pageStyle.transparentTitle in titleNViewTypeList ? {
+      type: titleNViewTypeList[pageStyle.transparentTitle],
+      backgroundColor: 'rgba(0,0,0,0)'
+    } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
+      type: titleNView ? 'default' : 'none'
+    } : null))
+    if (titleNView.type === 'none' || titleNView.type === 'transparent') {
       windowTop = 0
     }
 
@@ -300,7 +313,7 @@ module.exports = function (pagesJson, manifestJson) {
   const inputDir = process.env.UNI_INPUT_DIR
 
   const pageComponents = getPageComponents(inputDir, pagesJson)
-
+
   pagesJson.globalStyle = process.UNI_H5_PAGES_JSON.globalStyle
   delete pagesJson.pages
   delete pagesJson.subPackages

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

 <template>
   <uni-page :data-page="$route.meta.pagePath">
     <page-head
-      v-if="showNavigationBar"
+      v-if="navigationBar.type!=='none'"
       v-bind="navigationBar" />
     <page-refresh
       v-if="enablePullDownRefresh"
       ref="refresh"
       :color="refreshOptions.color"
-      :offset="refreshOptions.offset" />
+      :offset="refreshOptions.offset"
+    />
     <page-body
       v-if="enablePullDownRefresh"
       @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
       @touchend.native="_touchend"
-      @touchcancel.native="_touchend">
+      @touchcancel.native="_touchend"
+    >
       <slot name="page" />
     </page-body>
     <page-body v-else>
@@ -22,11 +24,11 @@
   </uni-page>
 </template>
 <style>
-    uni-page {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>
 <script>
 import {
@@ -47,6 +49,8 @@ import PageRefresh from './pageRefresh'
 
 import pullToRefresh from './pull-to-refresh'
 
+import safeAreaInsets from 'safe-area-insets'
+
 export default {
   name: 'Page',
   mpType: 'page',
@@ -124,55 +128,61 @@ export default {
       default: false
     },
     titleNView: {
-      type: [Boolean, Object],
-      default: true
+      type: [Boolean, Object, String],
+      default: ''
     },
     pullToRefresh: {
       type: Object,
       default () {
         return {}
       }
-    },
-    titleImage: {
-      type: String,
-      default: ''
-    },
-    transparentTitle: {
-      type: String,
-      default: 'none'
-    },
-    titlePenetrate: {
-      type: String,
-      default: 'NO'
+    },
+    titleImage: {
+      type: String,
+      default: ''
+    },
+    transparentTitle: {
+      type: String,
+      default: ''
+    },
+    titlePenetrate: {
+      type: String,
+      default: 'NO'
     }
   },
-  data () {
-    const titleNViewTypeList = {
-      'none': 'default',
-      'auto': 'transparent',
-      'always': 'float'
-    }
-
-    const yesNoParseList = {
-      'YES': true,
-      'NO': false
-    }
+  data () {
+    const titleNViewTypeList = {
+      'none': 'default',
+      'auto': 'transparent',
+      'always': 'float'
+    }
+    // 将 navigationStyle 和 transparentTitle 都合并到 titleNView
+    let titleNView = this.titleNView
+    titleNView = Object.assign({}, {
+      type: this.navigationStyle === 'custom' ? 'none' : 'default'
+    }, this.transparentTitle in titleNViewTypeList ? {
+      type: titleNViewTypeList[this.transparentTitle],
+      backgroundColor: 'rgba(0,0,0,0)'
+    } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
+      type: titleNView ? 'default' : 'none'
+    } : null))
+
+    const yesNoParseList = {
+      'YES': true,
+      'NO': false
+    }
 
     const navigationBar = mergeTitleNView({
       loading: false,
       backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
       backgroundColor: this.navigationBarBackgroundColor,
       textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
-      titleText: this.navigationBarTitleText,
+      titleText: this.navigationBarTitleText,
       titleImage: this.titleImage,
       duration: '0',
-      timingFunc: '',
-      type: titleNViewTypeList[this.transparentTitle],
-      transparentTitle: this.transparentTitle,
+      timingFunc: '',
       titlePenetrate: yesNoParseList[this.titlePenetrate]
-    }, this.titleNView)
-
-    const showNavigationBar = this.navigationStyle === 'default' && this.titleNView
+    }, titleNView)
 
     const refreshOptions = Object.assign({
       support: true,
@@ -185,10 +195,8 @@ export default {
 
     let offset = upx2px(refreshOptions.offset)
 
-    if (showNavigationBar) {
-      if (!(this.titleNView && this.titleNView.type === 'transparent')) {
-        offset += NAVBAR_HEIGHT
-      }
+    if (titleNView.type !== 'transparent') {
+      offset += NAVBAR_HEIGHT + safeAreaInsets.top
     }
 
     refreshOptions.offset = offset
@@ -196,7 +204,6 @@ export default {
     refreshOptions.range = upx2px(refreshOptions.range)
 
     return {
-      showNavigationBar,
       navigationBar,
       refreshOptions
     }

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

@@ -14,6 +14,8 @@ uni-page-wrapper {
 
 uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
   height: calc(100% - 44px);
+  height: calc(100% - 44px - constant(safe-area-inset-top));
+  height: calc(100% - 44px - env(safe-area-inset-top));
 }
 
 .uni-app--showtabbar uni-page-wrapper {
@@ -34,8 +36,8 @@ uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
 
 .uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
   height: calc(100% - 44px - 50px);
-  height: calc(100% - 44px - 50px - constant(safe-area-inset-bottom));
-  height: calc(100% - 44px - 50px - env(safe-area-inset-bottom));
+  height: calc(100% - 44px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));
+  height: calc(100% - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
 }
 
 uni-page-body {

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

@@ -41,14 +41,12 @@
         >
           <i
             v-if="loading"
-            class="uni-loading"/>
-          <img
-            v-if="titleImage!==''"
-            :src="titleImage"
-            class="uni-page-head__title_image" >
-          <template v-else>
-            {{ titleText }}
-          </template>
+            class="uni-loading" />
+          <img
+            v-if="titleImage!==''"
+            :src="titleImage"
+            class="uni-page-head__title_image" >
+          <template v-else>{{ titleText }}</template>
         </div>
       </div>
       <div
@@ -95,10 +93,11 @@
         </template>
       </div>
     </div>
-    <div
+    <div
       v-if="type!=='transparent'&&type!=='float'"
       :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
-      class="uni-placeholder"/>
+      class="uni-placeholder"
+    />
   </uni-page-head>
 </template>
 <style>
@@ -112,7 +111,11 @@ uni-page-head .uni-page-head {
   left: 0;
   width: 100%;
   height: 44px;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
   padding: 7px 3px;
+  padding-top: calc(7px + constant(safe-area-inset-top));
+  padding-top: calc(7px + env(safe-area-inset-top));
   display: flex;
   overflow: hidden;
   justify-content: space-between;
@@ -121,16 +124,16 @@ uni-page-head .uni-page-head {
   color: #fff;
   background-color: #000;
   transition-property: all;
-}
-
-uni-page-head .uni-page-head-titlePenetrate,
-uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
-uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
-  pointer-events: none;
-}
-
-uni-page-head .uni-page-head-titlePenetrate *{
-  pointer-events: auto;
+}
+
+uni-page-head .uni-page-head-titlePenetrate,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
+uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
+  pointer-events: none;
+}
+
+uni-page-head .uni-page-head-titlePenetrate * {
+  pointer-events: auto;
 }
 
 uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
@@ -140,10 +143,12 @@ uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
 uni-page-head .uni-page-head ~ .uni-placeholder {
   width: 100%;
   height: 44px;
-}
-
-uni-page-head .uni-placeholder-titlePenetrate{
-  pointer-events: none;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
+}
+
+uni-page-head .uni-placeholder-titlePenetrate {
+  pointer-events: none;
 }
 
 uni-page-head .uni-page-head * {
@@ -288,12 +293,12 @@ uni-page-head .uni-page-head__title .uni-loading {
   width: 16px;
   height: 16px;
   margin-top: -3px;
-}
-
-uni-page-head .uni-page-head__title .uni-page-head__title_image {
-  width: auto;
-  height: 26px;
-  vertical-align: middle;
+}
+
+uni-page-head .uni-page-head__title .uni-page-head__title_image {
+  width: auto;
+  height: 26px;
+  vertical-align: middle;
 }
 </style>
 <script>
@@ -321,7 +326,9 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '#000'
+      default () {
+        return this.type === 'transparent' ? '#000' : '#F8F8F8'
+      }
     },
     textColor: {
       type: String,
@@ -368,20 +375,14 @@ export default {
       default () {
         return false
       }
-    },
-    titleImage: {
-      type: String,
-      default: ''
-    },
-    transparentTitle: {
-      default: 'none',
-      validator (value) {
-        return ['none', 'auto', 'always'].indexOf(value) !== -1
-      }
-    },
-    titlePenetrate: {
-      type: Boolean,
-      default: false
+    },
+    titleImage: {
+      type: String,
+      default: ''
+    },
+    titlePenetrate: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

src/platforms/h5/components/page/transparent.js

@@ -52,7 +52,7 @@ export default {
           borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
         })
       })
-    } else if (this.transparentTitle === 'always') {
+    } else if (this.type === 'float') {
       const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
       const iconElemsStyles = []
       for (let i = 0; i < iconElems.length; i++) {
@@ -70,13 +70,13 @@ export default {
   },
   computed: {
     color () {
-      return this.type === 'transparent' || this.transparentTitle === 'always' ? '#fff' : this.textColor
+      return this.type === 'transparent' ? '#fff' : this.textColor
     },
     offset () {
       return parseInt(this.coverage)
     },
     bgColor () {
-      if (this.type === 'transparent' || this.transparentTitle === 'always') {
+      if (this.type === 'transparent') {
         const {
           r,
           g,

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

@@ -7,9 +7,11 @@ import safeAreaInsets from 'safe-area-insets'
 export default function getWindowOffset () {
   if (uni.canIUse('css.var')) {
     const style = document.documentElement.style
+    const top = parseInt((style.getPropertyValue('--window-top').match(/\d+/) || ['0'])[0])
+    const bottom = parseInt((style.getPropertyValue('--window-bottom').match(/\d+/) || ['0'])[0])
     return {
-      top: (parseInt(style.getPropertyValue('--window-top')) || 0) + safeAreaInsets.top,
-      bottom: (parseInt(style.getPropertyValue('--window-bottom')) || 0) + safeAreaInsets.bottom
+      top: top ? (top + safeAreaInsets.top) : 0,
+      bottom: bottom ? (bottom + safeAreaInsets.bottom) : 0
     }
   }
 
@@ -18,7 +20,8 @@ export default function getWindowOffset () {
   const pages = getCurrentPages()
   if (pages.length) {
     const pageVm = pages[pages.length - 1].$parent.$parent
-    top = pageVm.showNavigationBar && (pageVm.navigationBar.type !== 'transparent' || pageVm.navigationBar.type !== 'float') ? NAVBAR_HEIGHT : 0
+    const navigationBarType = pageVm.navigationBar.type
+    top = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
   }
   const app = getApp()
   if (app) {

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

@@ -24,11 +24,12 @@ const passiveOptions = supportsPassive ? {
 function updateCssVar (vm) {
   if (uni.canIUse('css.var')) {
     const pageVm = vm.$parent.$parent
-    const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' && pageVm.navigationBar.type !==
-      'float' ? (NAVBAR_HEIGHT +
-        'px')
-      : '0px'
-    const windowBottom = getApp().$children[0].showTabBar ? (TABBAR_HEIGHT + 'px') : '0px'
+    const navigationBarType = pageVm.navigationBar.type
+    const windowTopValue = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
+    const windowBottomValue = getApp().$children[0].showTabBar ? TABBAR_HEIGHT : 0
+    const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
+    const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : '0px'
+    const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : '0px'
     const style = document.documentElement.style
     style.setProperty('--window-top', windowTop)
     style.setProperty('--window-bottom', windowBottom)
@@ -37,7 +38,7 @@ function updateCssVar (vm) {
   }
 }
 
-export default function initSubscribe (subscribe) {
+export default function initSubscribe (subscribe) {
   let scrollListener = false
   let disableScrollListener = false
 
@@ -83,5 +84,5 @@ export default function initSubscribe (subscribe) {
         document.addEventListener('scroll', scrollListener)
       })
     }
-  })
-}
+  })
+}