uni-app怎么取消Tabbar的顶部分割线-uni-app-PHP中文网

最稳方案是在app.vue的style块中添加.uni-tabbar-border{background-color:transparent!important;height:0!important;border:none!important;}，并按平台补充条件编译：微信小程序加.uni-tabbar.uni-tabbar__border{display:none!important;}，app端加.uni-tabbar.uni-tabbar--topselected{border-top:none!important;}.uni-tabbar{border-top-color:transparent!important;border-top-width:0!important;box-shadow:none!important;}.uni-tabbar__content{background-image:none!important;}，且须避免scoped样式、确保写在app.vue全局样式中。

uni-app怎么取消tabbar的顶部分割线

uni-app取消Tabbar顶部分割线的通用写法

直接在 App.vue 的样式块里加这段 CSS 就能干掉大部分平台的顶部分割线：

.uni-tabbar-border {
  background-color: transparent !important;
  height: 0 !important;
  border: none !important;
}

这是最基础、最稳的一刀切方案。它针对的是 uni-app 内部用于绘制分割线的默认类 .uni-tabbar-border，强制清空背景、高度和边框。H5 和多数小程序（如微信、支付宝）在这一步后就干净了。

微信小程序平台要额外加一条 display: none

微信小程序对 .uni-tabbar-border 的渲染逻辑略有不同，光靠 height: 0 有时压不住——它可能用伪元素或独立 DOM 节点撑开空间。所以必须补上平台条件编译：

/* #ifdef MP-WEIXIN */
.uni-tabbar.uni-tabbar__border {
  display: none !important;
}
/* #endif */

注意这里选择器是 .uni-tabbar.uni-tabbar__border，不是 .uni-tabbar-border。微信小程序新版（基础库 2.25+）已改用这个类名，漏掉会无效。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

APP 端（iOS/Android）需分别处理阴影与边框

APP 平台的分割线本质是原生层绘制的阴影或 border，CSS 层级覆盖更难。iOS 主要是顶部阴影线，Android 则倾向用 border-top 实现：

iOS：用 .uni-tabbar.uni-tabbar--topselected 去掉 border-top，同时清除 box-shadow
Android：直接对 .uni-tabbar 设置 border-top-color: transparent 和 border-top-width: 0
iOS 15+：新增了 background-image 渲染的细线，得额外加 .uni-tabbar__content { background-image: none !important; }

完整 APP 段代码如下（带条件编译）：

/* #ifdef APP-PLUS */
.uni-tabbar.uni-tabbar--topselected {
  border-top: none !important;
}
.uni-tabbar {
  border-top-color: transparent !important;
  border-top-width: 0px !important;
  box-shadow: none !important;
}
.uni-tabbar__content {
  background-image: none !important;
}
/* #endif */