uni-app原生导航栏不支持下划线，必须使用自定义导航栏；可通过border-bottom实现静态下划线，或用绝对定位+transform实现动态滑动下划线，并注意ios状态栏高度适配及h5端safe-area-inset-top兼容。
uni-app 默认导航栏不支持下划线
uni-app 的原生导航栏（navigationStyle: "default"）根本没有「下划线」这个概念，所有关于“设置下划线颜色”的尝试，比如改 navigationBarBackgroundColor 或加 CSS 边框，都是无效的。它只渲染背景色、标题文字、返回按钮这三样东西。
想实现下划线，必须用自定义导航栏 + 自绘元素
真正能控制下划线颜色的，是你自己写的 HTML 结构。常见做法是在页面顶部放一个 <view></view> 模拟导航栏，再加一个 <view class="underline"></view> 作为下划线容器：
- 用
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></uni-nav-bar> 这个 UI 组件（非原生导航栏），它本身不提供 border-bottom 属性。想加下划线只能：
- 外层套一层
<view class="nav-wrapper"></view>，给 wrapper 加border-bottom - 或用
slot="right"/slot="left"插入空元素，再通过伪类::after绘制下划线（但 H5 兼容性差，App 端不支持部分伪类） - 组件的
height属性会影响下划线位置：设为"44px"时，border-bottom 会紧贴底部；设为"120rpx"就得手动调整 padding 和 line-height 才能让文字居中
最稳的方式，还是放弃组件封装，手写一个带 class 的 <view></view>，颜色、粗细、圆角、动画全部可控，也不依赖 uni-icons 或 mixin。
