From de7fc194bebddeabf2800bfbb6af5428a45c026b Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Thu, 28 Nov 2019 14:08:02 +0800
Subject: [PATCH] feat(v3): css
 var(--window-top,--window-bottom,--status-bar-height)

---
 .../lib/addStylesClient.js                    | 16 +++++++-----
 .../service/framework/plugins/lifecycle.js    |  4 ++-
 .../app-plus/view/bridge/subscribe/index.js   | 25 +++++++++++++++++++
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js b/packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js
index 5c299f64e1..93890947a3 100644
--- a/packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js
+++ b/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
+}
diff --git a/src/platforms/app-plus/service/framework/plugins/lifecycle.js b/src/platforms/app-plus/service/framework/plugins/lifecycle.js
index 4ff2ba6104..268d5a8b03 100644
--- a/src/platforms/app-plus/service/framework/plugins/lifecycle.js
+++ b/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
   }
 }
 
diff --git a/src/platforms/app-plus/view/bridge/subscribe/index.js b/src/platforms/app-plus/view/bridge/subscribe/index.js
index ba55d3d8b9..9586b4c334 100644
--- a/src/platforms/app-plus/view/bridge/subscribe/index.js
+++ b/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) {
-- 
GitLab