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
     }
 

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 {
+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,8 +128,8 @@ export default {
       default: false
     },
     titleNView: {
-      type: [Boolean, Object],
-      default: true
+      type: [Boolean, Object, String],
+      default: ''
     },
     pullToRefresh: {
       type: Object,
@@ -139,7 +143,7 @@ export default {
     },
     transparentTitle: {
       type: String,
-      default: 'none'
+      default: ''
     },
     titlePenetrate: {
       type: String,
@@ -152,6 +156,16 @@ export 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,
@@ -167,12 +181,8 @@ export default {
       titleImage: this.titleImage,
       duration: '0',
       timingFunc: '',
-      type: titleNViewTypeList[this.transparentTitle],
-      transparentTitle: this.transparentTitle,
       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"/>
+            class="uni-loading" />
           <img
             v-if="titleImage!==''"
             :src="titleImage"
             class="uni-page-head__title_image" >
-          <template v-else>
-            {{ titleText }}
-          </template>
+          <template v-else>{{ titleText }}</template>
         </div>
       </div>
       <div
@@ -98,7 +96,8 @@
     <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;
@@ -129,7 +132,7 @@ uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
   pointer-events: none;
 }
 
-uni-page-head .uni-page-head-titlePenetrate *{
+uni-page-head .uni-page-head-titlePenetrate * {
   pointer-events: auto;
 }
 
@@ -140,9 +143,11 @@ 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;
+  height: calc(44px + constant(safe-area-inset-top));
+  height: calc(44px + env(safe-area-inset-top));
 }
 
-uni-page-head .uni-placeholder-titlePenetrate{
+uni-page-head .uni-placeholder-titlePenetrate {
   pointer-events: none;
 }
 
@@ -321,7 +326,9 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '#000'
+      default () {
+        return this.type === 'transparent' ? '#000' : '#F8F8F8'
+      }
     },
     textColor: {
       type: String,
@@ -373,12 +380,6 @@ export default {
       type: String,
       default: ''
     },
-    transparentTitle: {
-      default: 'none',
-      validator (value) {
-        return ['none', 'auto', 'always'].indexOf(value) !== -1
-      }
-    },
     titlePenetrate: {
       type: Boolean,
       default: false

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)