微信小程序实现自定义头部导航栏（详细）

1.实现效果

在这里插入图片描述

2.实现原理

2.1获取胶囊的详细信息

在这里插入图片描述

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

在这里插入图片描述

width:胶囊的宽度；
height：胶囊的高度
top:胶囊距离顶部的距离

2.2获取导航栏的整体高度

在这里插入图片描述

wx.getSystemInfo({
   success: res => {
    let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,
    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
   }
})

整体高度：
状态栏高度+胶囊高度+(胶囊距离-胶囊高度）*2

    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;

2.3获取胶囊距离右边的距离

在这里插入图片描述

res.windowWidth - menuButtonObject.right

2.4完整获取代码：

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
   success: res => {
     //导航高度
     let statusBarHeight = res.statusBarHeight,
       navTop = menuButtonObject.top,
       navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
       navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
     this.globalData.navHeight = navHeight; //导航栏总体高度
     this.globalData.navTop = navTop; //胶囊距离顶部距离
     this.globalData.navObj = menuButtonObject.height; //胶囊高度
     this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
     // console.log(navHeight,navTop,menuButtonObject.height,navObjWid)
   },
   fail(err) {
     console.log(err);
   }
 })

3.代码实现

在json文件中定义custom，自定义导航栏样式.

{
  "usingComponents": {},
  "navigationBarTitleText": "导航栏自定义~",
  "navigationStyle":"custom"
}

拿到相应的导航栏信息

navHeight: app.globalData.navHeight, //导航栏高度
navTop: app.globalData.navTop, //导航栏距顶部距离
navObj: app.globalData.navObj, //胶囊的高度
navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离

在这里插入图片描述

自定义导航栏的样式，设置fixed布局

  
    {{store_name}}
    
      
        切换名称
        
      
    
  

.custom_head {
  width: 750rpx;
  background: #7ED1AC;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}

.head_store {
  font-size: 30rpx;
  font-weight: bold;
  width: 340rpx;
  margin-right: 30rpx;
  margin-left: 22rpx;
  flex-shrink: 0;
}

picker {
  flex-shrink: 0;
}

.picker {
  font-size: 28rpx;
}

.picker image {
  width: 18rpx;
  height: 10rpx;
  margin-left: 8rpx;
}

4.更多小程序demo，关注苏苏的码云，创造不易，希望大家star+关注，一起学习，冲呀~