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>
  </div>
</template>

<script type="text/ecmascript-6">
const app = getApp();
const { log } = app;
export default {
  name: "CustomNav",
  props: {
    title: {
      type: String,
      default: "",
    },
    customBgOpacity: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      navHeight: 0,
      navTop: 0,
      navConHeight: 0,
      bgOpacity: 0,
    }
  },
  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() {
    this.getNavbarInfo();
  },
  onShow() {

  },
  onReady() {

  },
  onHide() {

  },
  onUnload() {

  },
  onPageScroll(el) {
    this.getScroll(el);
  },
  mounted() { },
  methods: {
    getScroll(el) {
      let opacity = (el.scrollTop / 100).toFixed(1) - 0;
      this.bgOpacity = opacity > 1 ? 1 : opacity;
    },
    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')
    }
  }
}
</script>

<style lang="scss" scoped>
.CustomNav {
  position: relative;
  z-index: 9999;

  .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;
    color: #333;
  }
}
</style>