feat(v3): css var(--window-top,--window-bottom,--status-bar-height)

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

@@ -226,13 +226,17 @@ var UPX_RE = /([+-]?\d+(\.\d+)?)[r|u]px/g
 var VAR_STATUS_BAR_HEIGHT = /var\(--status-bar-height\)/gi
 var VAR_WINDOW_TOP = /var\(--window-top\)/gi
 var VAR_WINDOW_BOTTOM = /var\(--window-bottom\)/gi
-
+
+var statusBarHeight = false
 function processCss(css) {
-	if (!uni.canIUse('css.var')) { //不支持 css 变量
+	if (!uni.canIUse('css.var')) { //不支持 css 变量
+    if (statusBarHeight === false) {
+      statusBarHeight = plus.navigator.getStatusbarHeight()
+    }
 		var offset = {
-            statusBarHeight: plus.navigator.getStatusbarHeight(),
-            top:0,
-            bottom:0
+            statusBarHeight: statusBarHeight,
+            top: window.__WINDOW_TOP || 0,
+            bottom: window.__WINDOW_BOTTOM || 0
         }
 		css = css.replace(VAR_STATUS_BAR_HEIGHT, offset.statusBarHeight + 'px')
 			.replace(VAR_WINDOW_TOP, offset.top + 'px')
@@ -242,4 +246,4 @@ function processCss(css) {
 		.replace(UPX_RE, function(a, b) {
 			return uni.upx2px(b) + 'px'
 		})
-}
\ No newline at end of file
+}

src/platforms/app-plus/service/framework/plugins/lifecycle.js

@@ -37,7 +37,9 @@ function parsePageCreateOptions (vm, route) {
     disableScroll,
     onPageScroll,
     onPageReachBottom,
-    onReachBottomDistance
+    onReachBottomDistance,
+    windowTop: 0, // TODO
+    windowBottom: 0 // TODO
   }
 }
 

src/platforms/app-plus/view/bridge/subscribe/index.js

@@ -19,12 +19,37 @@ const passiveOptions = supportsPassive ? {
   passive: false
 } : false
 
+function onCssVar ({
+  windowTop,
+  windowBottom
+}) {
+  global.__WINDOW_TOP = windowTop
+  global.__WINDOW_BOTTOM = windowBottom
+  if (uni.canIUse('css.var')) {
+    const style = document.documentElement.style
+    style.setProperty('--window-top', windowTop + 'px')
+    style.setProperty('--window-bottom', windowBottom + 'px')
+    style.setProperty('--status-bar-height', plus.navigator.getStatusbarHeight() + 'px')
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(`--window-top=${windowTop}`)
+      console.log(`--window-bottom=${windowBottom}`)
+    }
+  }
+}
+
 function onPageCreate ({
+  windowTop,
+  windowBottom,
   disableScroll,
   onPageScroll,
   onPageReachBottom,
   onReachBottomDistance
 }, pageId) {
+  onCssVar({
+    windowTop,
+    windowBottom
+  })
+
   if (disableScroll) {
     document.addEventListener('touchmove', disableScrollListener, passiveOptions)
   } else if (onPageScroll || onPageReachBottom) {