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

原创

于 2021-08-13 14:48:49 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序和uni-app中自定义导航栏。首先，在app.json设置`navigationStyle: "custom"`，然后通过微信小程序API获取胶囊按钮和设备信息，以适配不同手机型号。接着，利用uniapp的getMenuButtonBoundingClientRect和getSystemInfo方法获取导航栏高度、胶囊按钮距离等信息，实现自定义导航栏设计。

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

1.第一步：在app.json文件中找到 window 对象，然后加上 “navigationStyle”: “custom” 这个属性就可以了。
代码：
“window”: {
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “uni-app”,
“navigationBarBackgroundColor”: “#F8F8F8”,
“backgroundColor”: “#F8F8F8”,
"navigationStyle": "custom"
}
2.第二步：自定义导航栏，首先得知道小程序默认导航栏的高度和宽度，因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号。
a. 整个导航栏的高度；
b. 胶囊按钮与顶部的距离；
c. 胶囊按钮与右侧的距离。
d.问题：如何获取上面信息哪？
微信小程序api
wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息
wx.getSystemInfo() 获取设备信息
3.第三步：实现定义导航栏（这里采用了uniapp来实现的，微信小程序同理可得）