CustomNav.vue

<template>
  <div v-if="!isPcPlatform" 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">
let navHeight, navTop, navConHeight;
export default {
  name: "CustomNav",
  props: {
    title: {
      type: String,
      default: "",
    },
    customBgOpacity: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      shopName: ' ',
      bgOpacity: 0,
      
      zIndexStyle: '',
      navFixedBgStyle: '',
      navBgStyle: '',
      contentStyle: '',
      isPcPlatform: false, // 是否是PC平台
    }
  },
  created() {
    const deviceInfo = wx.getDeviceInfo()
    this.isPcPlatform = ['mac', 'windows'].includes(deviceInfo.platform);
    if (!this.isPcPlatform) {
      this.getNavbarInfo();
      this.initialize();
    }
  },
  onPageScroll(el) {
    if (!this.isPcPlatform) {
      this.getScroll(el);
    }
  },
  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() {
      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>

<style lang="scss" scoped>
.CustomNav {
  position: relative;

  .navFixedBg {
    width: 100%;
  }

  .navBg {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
  }

  .content {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    font-family: "PingFangSC-Medium, PingFang SC";
  }
}
</style>