微信小程序自定义导航的方法

在app.js文件中，首先获取状态栏信息、胶囊按钮信息、系统信息。
在onLaunch生命周期函数中，通过一系列方法获取并存储状态栏高度、pod按钮位置信息、导航栏高度。
接下来，导航栏包含在名为NavigationBar的组件中，该组件包含显示返回箭头、自定义导航栏标题和自定义返回方法等属性。
用户可以自定义导航栏的标题以及是否要显示后退箭头。
如果他们需要自定义返回方法，可以通过触发事件来实现。
导航栏组件的显示结构分为三个部分，分别是状态栏、导航栏框、底部。
状态栏的高度由状态栏的高度决定，导航栏盒子的高度和宽度根据pod按钮的位置信息动态调整。
导航栏框包含返回箭头和导航栏标题，箭头通过点击事件返回上一页。
标题支持自定义，可以通过点击事件触发相应的事件。
在导航栏组件的样式文件中，为导航栏定义了导航栏及其内部元素的样式，如高度、宽度、背景色、字体大小、颜色等，使其具有良好的适应性到不同的设备。
为了实现自定义导航栏，在页面的wxml文件中引入导航栏组件，并通过属性设置标题、是否显示返回箭头、自定义返回方式。
以上就是微信小程序自定义导航栏的具体实现方法，通过组件封装，可以更加灵活的自定义导航栏，提高用户体验。
我们希望这篇文章对读者有用。

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

1.实现效果

2.实现原理2.1获取

letmenuButtonObject=wx胶囊的详细信息。
();

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

2.2获取导航栏总高度

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

总高度：状态栏高度+胶囊体高度+（胶囊距离-高度Capsule)*2

navHeight=statusBarHeight+menuButtonObject.height+(menuButtonObject.top-statusBarHeight)*2;2.3获取Capsule到右侧的距离

res.windowWidth-menuButtonObject.right2.4完整代码捕获：letmenuButtonObject=wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({nextess:res=>{//导航高度lestatusBarHeight=res.statusBarHeight,navTop=menuButtonObject.top,navObjWid=res.windowWidth-menuButtonObject.right+menuButtonObject.width,//glue胶囊按钮到右侧的距离=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;//胶囊的宽度（包括右侧距离）//withsole.log(navHeight,navTop,menuButtonObject.height,navObjWid)},fail(err){console.日志(错误);}})3.代码实现

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

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

获取对应的导航栏信息

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

自定义样式导航栏并设置固定布局

{{store_name}}更改名称</视图>.custom_head{宽度:750rpx;背景:#7ED1AC;色:#fff;位置:固定;顶部:0;z-index:999;}.head_store{字体大小:30rpx;字体粗细:粗体;宽度:340rpx;margin-right:30rpx;左边距：22rpx；伸缩收缩：0；}picker{flex-shrink:0;}.picker{font-size:28rpx;}.pickerimage{width:18rpx;height:10rpx;margin-left:8rpx;}

较小的程序演示，关注苏苏码云，创作并不容易，希望大家开始关注，一起学习和尝试~

uniapp微信小程序自定义导航栏的全过程

在Uniapp的多终端开发过程中，我们经常会遇到默认导航栏无法满足业务需求的情况。
为了更好的适应不同平台，我们需要自定义导航栏。
以微信小程序为例，我们可以通过uni.getSystemInfoSync().statusBarHeight获取状态栏的高度，但是如何获取标题栏的高度呢？我们可以根据胶囊位置计算标题栏的高度。
具体方法是计算胶囊顶部边界到顶部的距离减去状态栏的高度，然后乘以2加上胶囊的高度，即为标题栏的高度。
然后在标题栏中添加文本区域，将高度设置为胶囊的高度，实现flex布局的顶部和底部居中。
考虑到多终端的情况，我们用uniapp得到的状态栏在h5、小程序、app原生平台上都有效。
在h5网页上我们使用浏览器内置的导航栏，样式简单，而在app页面我们需要添加自定义的标题栏样式以及高于状态栏高度的高度。
因此，我们在封装自定义导航栏时需要进行条件编译。
我把微信小程序分开对待，其平台统一对待。
首先我们将获取设备信息的代码封装成统一的js文件，方便组件和页面的使用：javascriptconstsystemInfo=function(){letsystemInfomations=uni.getSystemInfoSync()letscaleFactor=750/systemInfomations.windowWidthletwindowHeight=systemInfomations.windowHeight*scaleFactorletwindowWidth=systemInfomations.windowWidth*scaleFactorletstatusBarHeight=(systemInfomations.statusBarHeight)*scaleFactorletnavHeight=0#ifdefMP-WEIXINconstmenuButtonInfo=wx.getMenuButtonBoundingClientRect()letmenuButtonHeight=menuButtonInfo.height*scaleFactorletmenuButtonWidth=menuButtonInfo.width*scaleFactorletmenuButtonTop=menuButtonInfo.top*scaleFactorletmenuButtonRight=menuButtonInfo.right*scaleFactorletmenuButtonBottom=menuButtonInfo.bottom*scaleFactorletmenuButtonLeft=menuButtonInfo.left*scaleFactoravHeight=menuButtonHeight+(menuButtonTop-statusBarHeight)*2#endifreturn{scaleFactor,windowHeight,windowWidth,statusBarHeight,menuButtonHeight,menuButtonWidth,menuButtonTop,menuButtonRight,menuButtonBottom,menuButtonLeft,navHeight}}export{systemInfo}然后定义导航栏组件支持不同平台的自定义样式：{{textContent}}{{textContent}}引入组件：importHeadNavfrom'@/components/HeadNav.vue'注册组件：components:{HeadNav}渲染：微信小程序：h5:app:中项目中，如果对h5页面的导航栏没有特殊限制的话，如果在实际开发中h5页面不需要这个导航栏。
请在h5页面模板中添加条件编译。
总结