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

1.实现效果

2.实现原理

2.1获取胶囊的详细信息

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

2.2获取导航栏的整体高度

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

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

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

2.4完整获取代码：

 {     //导航高度     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，自定义导航栏样式.

拿到相应的导航栏信息

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

      {{store_name}}                  切换名称                    

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