uniapp 自定义导航栏胶囊按钮 状态栏适配别再用默认导航了导读小程序默认导航栏就一个标题想放搜索框、自定义按钮、渐变背景全都得靠自定义。我把 job-uniapp 的导航栏改成了自定义中间踩了胶囊位置测量、状态栏高度、页面滚动吸顶一堆坑。这篇把完整方案写清楚。为什么改自定义导航栏因为产品要一个带搜索框 城市切换的首页头部默认导航栏塞不进去。uniapp 里把pages.json的页面navigationStyle设成custom整页就全屏了导航栏自己画。第一步关闭默认导航栏{pages:[{path:pages/index/index,style:{navigationStyle:custom,navigationBarTitleText:小蓝直聘}}]}注意navigationStyle: custom只在 App 端和小程序端生效H5 端这个配置无效H5 默认就是自定义的没有原生导航栏概念但 H5 也没有胶囊按钮后面适配要区分。第二步获取胶囊按钮位置和状态栏高度**自定义导航栏最难的是对齐右上角那个胶囊按钮小程序端以及避开刘海屏。**uniapp 提供了两个 API// 状态栏高度刘海屏区域高度constsystemInfouni.getSystemInfoSync();conststatusBarHeightsystemInfo.statusBarHeight;// 胶囊按钮位置仅小程序端有constmenuButtonInfouni.getMenuButtonBoundingClientRect();注意getMenuButtonBoundingClientRect()只在微信小程序里有uni.getMenuButtonBoundingClientRect()在 uniapp 里也有封装但 H5/App 端没有这个原生概念要兼容判断。导航栏高度算法// 导航栏总高度 状态栏高度 胶囊按钮高度 上下留白constnavBarHeight(menuButtonInfo.top-statusBarHeight)*2menuButtonInfo.height;这个公式的含义胶囊按钮顶部到状态栏底部的距离就是导航栏上下留白的一半所以(top - statusBarHeight) * 2 height就是导航栏完整高度。第三步封装 nav-bar 组件我用一个自定义组件统一处理页面里直接引用export default { name: NavBar, props: { showBack: { type: Boolean, default: false } }, data() { return { statusBarHeight: 20, menuButtonHeight: 32 } }, computed: { contentHeight() { return this.menuButtonHeight }, navBarHeight() { return this.statusBarHeight this.menuButtonHeight 8 } }, created() { const sys uni.getSystemInfoSync() this.statusBarHeight sys.statusBarHeight || 20 // #ifdef MP-WEIXIN const menu uni.getMenuButtonBoundingClientRect() if (menu menu.height) { this.menuButtonHeight menu.height this.navBarTotal (menu.top - this.statusBarHeight) * 2 menu.height } // #endif } }条件编译#ifdef MP-WEIXIN保证只有小程序端才取胶囊位置H5 和 App 端用默认值。踩坑记录坑一created 里拿不到胶囊按钮位置现象真机上导航栏高度算出来不对胶囊按钮和标题错位。排查发现getMenuButtonBoundingClientRect()在onLoad/created早期调用返回全 0。定位思路这个 API 依赖页面渲染完成组件 created 阶段 DOM 还没就绪。解决放到onReady或者用setTimeout延迟调用。更稳的做法是在 App.vue 的 onLaunch 里提前获取一次缓存起来所有页面复用。// App.vueonLaunch(){// #ifdef MP-WEIXINconstmenuuni.getMenuButtonBoundingClientRect()uni.$globalData{menuButtonInfo:menu,statusBarHeight:uni.getSystemInfoSync().statusBarHeight}// #endif}坑二H5 端没有胶囊按钮导航栏右边空一块现象H5 打开页面导航栏右侧空着胶囊区域占位导致标题偏左。解决H5 端不预留胶囊空间导航栏右侧放正常的操作按钮。坑三页面滚动时导航栏不吸顶现象自定义导航栏是页面的一部分页面滚动导航栏跟着滚走了。解决给导航栏加position: fixed; top: 0; left: 0; right: 0; z-index: 999同时给页面内容加padding-top等于导航栏高度不然内容会被遮住。坑四自定义导航栏后返回按钮失效现象关闭默认导航栏后左上角返回按钮没了用户点了页面里的返回没反应。解决uni.navigateBack()之前判断getCurrentPages().length只有一页时用uni.switchTab或uni.reLaunch回首页。可直接复用navigationStyle: custom关默认导航栏注意 H5 端无效导航栏高度公式(胶囊.top - 状态栏高度) * 2 胶囊.height胶囊位置在onReady后取或 App.vue onLaunch 里缓存导航栏position: fixed吸顶页面内容补padding-top条件编译区分小程序/H5H5 无胶囊按钮返回逻辑判断页面栈深度只有一页走 reLaunch**自定义导航栏这块细节特别多机型差异一测一个准。**job-uniapp小蓝直聘里这套组件已经是兼容好的版本直接抄作业就行。项目源码https://gitee.com/gzqkl/job-uniapp