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

老男人，

于 2023-05-12 18:09:16 发布

阅读量294

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.youkuaiyun.com/qq_45889379/article/details/130647877

版权

文章介绍了如何在微信小程序中获取胶囊按钮的详细信息，包括宽度、高度以及距离顶部的距离，然后结合系统状态栏高度计算导航栏的整体高度。此外，还展示了获取胶囊距离右边的距离的代码，并提供了在JSON文件中定义custom以实现自定义导航栏样式的示例。最后，给出了CSS样式来固定布局并设置自定义导航栏的颜色和字体等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**1获取胶囊的详细信息 **

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

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

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;

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

res.windowWidth - menuButtonObject.right

4完整获取代码：

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo(

最低0.47元/天解锁文章