微信小程序自定义navigation bar

这里假设uniapp开发微信小程序

一、app.vue

globalData: {
      navBarHeight: 0, // 导航栏高度
      statusBarHeight: 0 // 状态高度
}, // 全局变量

onLaunch: function() {
  console.log("App Launch");
  let self = this;
  // 计算动态高度
  uni.getSystemInfo({
  success: function(e) {
     // navigationbar高度等于状态栏高度加自定义导航部分高度
     // 状态栏高度是e.statusBarHeight
    //导航栏部分高度有的方案是根据胶囊的边距再加胶囊的高度
    // 有的说状态栏高度加44px，(有的说安卓和ios 分别是44 和 48 )
          const navBarHeight = e.statusBarHeight + 44;
          self.globalData.navBarHeight = navBarHeight;
          self.globalData.statusBarHeight = e.statusBarHeight;
          uni.setStorageSync('statusBarHeight', navBarHeight);
         uni.setStorageSync('statusBarHeight', navBarHeight);
  }
})

二、navigationBar

<template>
  <view class="navigation-bar-wrapper" :style="{height: navBarHeight + 'px', paddingTop: statusBarHeight + 'px'}">
    <view class="_back-btn" @tap="back"></view>
    <slot></slot>
  </view>
</template>

<script>
var app = getApp();
export default {
  name: "uni-navigation-bar",
  data() {
    return {
      navBarHeight: app.globalData.navBarHeight,
      statusBarHeight: app.globalData.statusBarHeight,
    }
  },
  methods: {
    back() {
      this.$emit('back');
    }
  }
}
</script>

三、引用地方

<uniNavigationBar @back="onBack">
      <view class="nav-bar-wrapper">
        这里是导航栏
      </view>
    </uniNavigationBar>