uni-nav-bar 的 shadow 属性是组件内置开关,非 css 阴影;设 shadow="false" 或 :shadow="false" 可关闭,但需注意 nvue 下需用 ::v-deep 清除 border-bottom 和 box-shadow。

uni-nav-bar 的 shadow 属性是开关,不是 CSS 阴影
很多人以为 uni-nav-bar 底部那条灰线是 box-shadow 或者 -webkit-tap-highlight-color 导致的,其实不是。它由组件内置的 shadow 属性控制,本质是组件逻辑层渲染的一条边框线,不是样式层的阴影。
直接在标签上设 shadow="false" 就能关掉:
<uni-nav-bar shadow="false" title="标题"></uni-nav-bar>
注意:shadow 是布尔属性,写成 :shadow="false"(带冒号)会触发 Vue 响应式解析,但值为字符串 "false" 时仍被当作 true —— 所以要么不带冒号写死 shadow="false",要么用 v-bind 写成 :shadow="false"(JS false 值)。
这个属性在 H5、App、小程序三端都生效,但 nvue 下部分安卓机型渲染异常,官方建议 nvue 页面直接关闭该属性,别依赖它做条件切换。
App 端真机仍有残留线?检查 titleNView 和 navigationStyle 冲突
即使关了 shadow,iOS 或某些 Android 真机上仍可能看到一条细线,这往往不是 uni-nav-bar 画的,而是原生导航栏(titleNView)自带的分割线。
- 确认 pages.json 中该页面的
navigationStyle没设成default—— 否则uni-nav-bar只是盖在原生导航栏上面,底层线还在 - App 端必须同时设
"navigationStyle": "custom"+"titleNView": false,否则shadow="false"无效 - 微信小程序不受
titleNView影响,但若用了自定义导航栏组件,要检查组件内部是否写了border-bottom或box-shadow
H5 端底部线来自 router-view 的默认 margin/padding
H5 端常被忽略的一点:uni-nav-bar 自身没阴影,但整个页面容器(router-view 或 page)可能有默认样式撑出间隙,让人误以为是导航栏阴影。
必须加这两条 CSS 才算干净:
page { margin: 0; padding: 0; }
.uni-page-wrapper { padding-top: 0 !important; }
如果还用了 navigationStyle: "custom",额外加:
page::before { display: none; }
否则 UniApp 注入的伪元素会强制占位,导致导航栏下方多出几像素空隙。
nvue 页面里 shadow 属性失效?直接用 CSS 覆盖
nvue 渲染机制不同,shadow 属性在某些安卓 WebView 下不触发,或者只在 iOS 生效。这时候不能依赖属性开关,得手动干掉。
给 uni-nav-bar 加 class,然后在 style 里写:
.no-nav-shadow ::v-deep .uni-navbar {
border-bottom-width: 0;
box-shadow: none;
}
注意三点:
- nvue 不支持 :deep(),必须用
::v-deep(旧写法,但目前唯一稳定生效的) -
.uni-navbar是编译后生成的真实类名,不是uni-nav-bar标签名 - 不要只写
border-bottom: none—— 有些平台会 fallback 到box-shadow,必须两者都清
最易被忽略的是:nvue 下改了样式却没生效,大概率是因为没加 ::v-deep,或者 selector 没命中编译后的内部结构。真机调试时,务必打开 devtools 查看实际 DOM 类名再下手。











