uni-app原生导航栏不支持下划线,必须使用自定义导航栏;可通过border-bottom实现静态下划线,或用绝对定位+transform实现动态滑动下划线,并注意iOS状态栏高度适配及H5端safe-area-inset-top兼容。

uni-app 默认导航栏不支持下划线
uni-app 的原生导航栏(navigationStyle: "default")根本没有「下划线」这个概念,所有关于“设置下划线颜色”的尝试,比如改 navigationBarBackgroundColor 或加 CSS 边框,都是无效的。它只渲染背景色、标题文字、返回按钮这三样东西。
想实现下划线,必须用自定义导航栏 + 自绘元素
真正能控制下划线颜色的,是你自己写的 HTML 结构。常见做法是在页面顶部放一个 <view> 模拟导航栏,再加一个 <view class="underline"> 作为下划线容器:
- 用
border-bottom实现静态下划线(最简单):.underline { border-bottom: 2px solid #3b82f6; } - 用绝对定位 +
width/transform实现动态滑动下划线(如 tab 切换时跟随移动) - 注意高度对齐:iOS 状态栏 + 导航栏总高通常为
statusBarHeight + 44px,需用uni.getSystemInfoSync().statusBarHeight动态计算 - H5 端要额外处理:固定定位可能被浏览器地址栏遮挡,建议加
env(safe-area-inset-top)兼容刘海屏
pages.json 里写 navigationBarBackgroundColor 不影响下划线
很多人误以为在 pages.json 中设置 navigationBarBackgroundColor 后,再给自定义导航栏加个 border-bottom 就能“融合”,其实这是两个独立层:原生导航栏已被 navigationStyle: "custom" 隐藏,你看到的全是 webview 渲染内容,它的边框颜色和 navigationBarBackgroundColor 完全无关。
容易踩的坑是:在 App 端开了 titleNView(用于原生渲染标题栏),又同时写了自定义导航栏,结果出现双导航栏重叠——此时下划线会被 titleNView 盖住,根本看不见。
uni-nav-bar 组件的 border-bottom 不生效?
如果你用的是 <uni-nav-bar> 这个 UI 组件(非原生导航栏),它本身不提供 border-bottom 属性。想加下划线只能:
- 外层套一层
<view class="nav-wrapper">,给 wrapper 加border-bottom - 或用
slot="right"/slot="left"插入空元素,再通过伪类::after绘制下划线(但 H5 兼容性差,App 端不支持部分伪类) - 组件的
height属性会影响下划线位置:设为"44px"时,border-bottom 会紧贴底部;设为"120rpx"就得手动调整 padding 和 line-height 才能让文字居中
最稳的方式,还是放弃组件封装,手写一个带 class 的 <view>,颜色、粗细、圆角、动画全部可控,也不依赖 uni-icons 或 mixin。


















