首页沉侵式优化

src/components/ThemeDataPlant.vue

@@ -85,6 +85,7 @@ export default {
     height: 100%;
     background: linear-gradient(rgba(0, 0, 0, 0) 10%, rgb(255, 255, 255) 40%);
   }
+  transition: background-color .5s;
 }
 
 .ThemeDataPlant::before {

src/components/common/CustomNav.vue

 <template>
-  <div class="CustomNav">
-    <div class="navFixedBg" :style="{ 'height': navHeight + 'px' }">
-    </div>
-    <div class="navBg"
-      :style="{ 'height': navHeight + 'px', background: 'rgba(255,255,255,' + (customBgOpacity ? bgOpacity : 1) + ')' }">
-      <div class="content" :style="{ 'top': navTop + 'px', height: navConHeight + 'px' }">
-        {{ title || shopName }}
-      </div>
+  <div class="CustomNav" :style="zIndexStyle">
+    <div class="navFixedBg" :style="navFixedBgStyle"></div>
+    <div class="navBg" :style="navBgStyle">
+      <div class="content" :style="contentStyle">{{showShopName}}</div>
     </div>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
-const app = getApp();
-const { log } = app;
+let navHeight, navTop, navConHeight;
 export default {
   name: "CustomNav",
   props: {
@@ -28,64 +23,78 @@ export default {
   },
   data() {
     return {
-      navHeight: 0,
-      navTop: 0,
-      navConHeight: 0,
+      shopName: ' ',
       bgOpacity: 0,
+      
+      zIndexStyle: '',
+      navFixedBgStyle: '',
+      navBgStyle: '',
+      contentStyle: ''
     }
   },
-  components: {},
-  computed: {
-    shopName() {
-      // let shopName = app.globalData && app.globalData.shopInfo && app.globalData.shopInfo.shopName;
-      let shopName = wx.getStorageSync("shopName");
-      return shopName || "";
-    },
-    listHeight() {
-      return `calc(100vh - ${this.navConHeight}px - ${this.navTop}px - 0.5rem )`
-    },
-    topBgHeight() {
-      return `calc(2rem + ${this.navTop}px)`
-    },
-    topHeight() {
-      return `calc(2rem + ${this.navTop}px)`
-    }
-  },
-  created() { },
-  onLoad() {
+  created() {
     this.getNavbarInfo();
-  },
-  onShow() {
-
-  },
-  onReady() {
-
-  },
-  onHide() {
-
-  },
-  onUnload() {
-
+    this.initialize();
   },
   onPageScroll(el) {
     this.getScroll(el);
   },
-  mounted() { },
+  watch: {
+    customBgOpacity() {
+      wx.nextTick(() => {
+        this.initialize();
+        this.$forceUpdate();
+      })
+    }
+  },
+  computed: {
+    showShopName() {
+      return this.shopName;
+    }
+  },
   methods: {
+    initialize() {
+      this.setShopName();
+      this.setZIndexStyle();
+      this.setNavFixedBgStyle();
+      this.setNavBgStyle();
+      this.setContentStyle();
+    },
     getScroll(el) {
       let opacity = (el.scrollTop / 100).toFixed(1) - 0;
       this.bgOpacity = opacity > 1 ? 1 : opacity;
+      this.setNavBgStyle();
+      this.setContentStyle();
     },
     getNavbarInfo() {
-      let menuInfo = wx.getMenuButtonBoundingClientRect();
-      console.log(menuInfo, '-menuInfo')
-      let res = wx.getSystemInfoSync()
-      console.log(res, '-getSystemInfoSync')
-      this.navTop = res.statusBarHeight;
-      this.navHeight = (res.statusBarHeight + menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2)
-      this.navConHeight = (menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2);
-      console.log(this.navTop, this.navHeight, this.navConHeight, '-this.navConHeight')
-    }
+      const { height, top } = wx.getMenuButtonBoundingClientRect();
+      const { statusBarHeight } = wx.getSystemInfoSync()
+      navTop = statusBarHeight;
+      navHeight = (statusBarHeight + height + (top - statusBarHeight) * 2);
+      navConHeight = (height + (top - statusBarHeight) * 2);
+    },
+    setShopName() {
+      this.shopName = this.title || wx.getStorageSync("shopName");
+    },
+    setZIndexStyle() {
+      this.zIndexStyle = `z-index: ${this.customBgOpacity ? 9991 : 9999};`;
+    },
+    setNavFixedBgStyle() {
+      this.navFixedBgStyle = `height:${this.customBgOpacity ? navTop : navHeight}px;`;
+    },
+    setNavBgStyle() {
+      this.navBgStyle = `
+        height: ${navHeight}px;
+        background:rgba(255, 255, 255, ${this.customBgOpacity ? this.bgOpacity : 1});
+      `;
+    },
+    setContentStyle() {
+      this.contentStyle = `
+        top: ${navTop}px;
+        height: ${navConHeight}px;
+        opacity: ${this.customBgOpacity ? this.bgOpacity : 1};
+      `;
+    },
   }
 }
 </script>
@@ -93,7 +102,6 @@ export default {
 <style lang="scss" scoped>
 .CustomNav {
   position: relative;
-  z-index: 9999;
 
   .navFixedBg {
     width: 100%;

src/components/common/StoreAddr.vue

@@ -116,6 +116,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .storeAddr {
+  position: relative;
+  z-index: 9992;
   padding: 6px 12px;
   justify-content: space-between;