微信小程序自定义顶部导航栏（兼容适配所有机型）

最新推荐文章于 2025-06-11 13:11:18 发布

置顶 Duccky

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量9.9w

点赞数 21

CC 4.0 BY-SA版权

分类专栏： css 微信小程序文章标签：自定义导航栏微信小程序微信小程序自定义导航栏

本文链接：https://blog.csdn.net/weixin_39872588/article/details/80500164

微信小程序同时被 2 个专栏收录

10 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍如何在微信小程序中自定义导航栏的颜色和样式，包括实现胶囊按钮颜色的更改及兼容不同机型的方法。

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

在微信小程序中，自定义导航栏的颜色可以在app.json. window里面添加navigationBarBackgroundColor属性。

但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，保留右上角胶囊状的按钮，如下图所示。

Q：如果改变胶囊体颜色？

A：胶囊体目前只支持黑色和白色两种颜色在app.josn window 加上 "navigationBarTextStyle":"white/black"

注：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写！！！！

Q：如何兼容适配所有机型，包括刘海屏？

A：使用 wx.getSystemInfoSync()['statusBarHeight'] 则能获取到顶部状态栏的高度，单位为px.

简单示例：

在app.js里面
App({
    globalData: {
      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
    }
})

WXML 自定义顶部状态栏div结构
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
  <text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

app.css 全局css中设置样式
.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: #2C5CFF;
  z-index: 999;
}
.custom text{
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  max-width: 280rpx;
}
.empty_custom{
  height: 45px;
  width: 100%;
}

在index.js中取出statusBarHeight值
Page({
    data:{
        statusBarHeight: app.globalData.statusBarHeight
    }
})