uniapp 微信小程序自定义头部导航栏

隐藏原生的navigationBar

1.全局设为自定义

"globalStyle": {
		"navigationStyle": "custom",
}

2.指定页面设为自定义

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationStyle": ''custom",  //设置为自定义导航
      }
    },
    ...
  ]
}

封装自定义头部导航组件

当我们在JSON中将navigationStyle设置成custom后，当前页面的顶部导航栏就需要我们制作了，但出现了一下几个问题：

导航栏的高度该是多少？
导航栏被刘海、信号图标给覆盖了，就像下图

因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。

状态栏的高度可以通过 wx.getSystemInfo() 获取。

胶囊按钮的信息可以通过 wx.getMenuButtonBoundingClientRect() 获取。

所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。

由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。

实现方法

1、新建navbar组件

html 代码

// 设置导航栏的高度等于实际获取的导航栏高度；设置返回箭头、文字所在 view 的高度等于胶囊按钮的高度，距离顶部的距离等于胶囊按钮距离顶部的距离，然后设置返回箭头、文字垂直居中
<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
	  <view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
	    <view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
	  </view>
	  <view class="text" :style="{ 'height': capsuleHeight + 'px', 'top': capsuleTop + 'px' }">{{title}}</view>
	</view>

css样式

.navbar{
  width: 100%;
  //设置导航栏固定在顶部
  position: fixed;
  top: 0;
  z-index: 99;
}
.arrow-content{
  position: absolute;
  left: 40rpx;
  z-index: 999;
  display: flex;
  align-items: center;
}
.arrow{
  width: 20rpx;
  height: 20rpx;
  border: 5rpx solid #FFFFFF;
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform: rotate(-45deg);
}
.text{
  position: absolute;
  left: 0;
  right: 0;
  font-size: 28rpx;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

js代码

export default {
  props: {
    title:{
      type: String,
      default: '首页'
    },
    background:{
      type: String,
      default: 'linear-gradient(to right,#FF3413,#FF924D)'
    },
    isShowArrow:{
      type: Boolean,
      default: true
    }
  },
  data:{
    capsuleTop: '', //胶囊距离屏幕顶部的距离
    capsuleHeight: '', //胶囊高度
    navbarHeight: '' //导航栏高度
  },
  onLoad(){
  	// 获取应用实例
	const App = getApp();
  	this.capsuleTop = App.globalData.capsule.top, 
    this.capsuleHeight = App.globalData.capsule.height, 
    this.navbarHeight = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight, 
  },
  methods: {
    handleGoToBack(){
      uni.navigateBack({
        delta: 1
      })
    }
  }
}

app.vue代码

export default {
  globalData: {
    system: '',
    capsule: ''
  },
  onLaunch: function () {
   // 在 app.vue 中全局获取一次系统和胶囊信息
   // 获取系统信息
   uni.getSystemInfo({
    success: res => {
      this.globalData.system = res
    }
  })
  // 获取胶囊信息
  this.globalData.capsule = wx.getMenuButtonBoundingClientRect()
  }
}

在需要自定义头部的页面里直接引入组件即可使用