微信小程序的tabbar组件样式设置，隐藏默认线条

最新推荐文章于 2025-03-13 07:00:00 发布

尤其十月

最新推荐文章于 2025-03-13 07:00:00 发布

阅读量2.6k

点赞数 1

分类专栏：小程序 vue uniapp 文章标签：小程序前端 vue.js

本文链接：https://blog.csdn.net/weixin_43776985/article/details/106586302

版权

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

小程序

2 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

本文介绍了在微信小程序中如何根据UI设计图自定义tabbar组件的样式，特别是如何设置tabbar上边框颜色以隐藏默认线条，提供了解决此类问题的代码示例和总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据ui设计图，有些时候需要对tabbar组件进行样式的设置

属性说明

属性	说明
color	tab 上的文字默认颜色，HexColor
selectedColor	tab 上的文字选中时的颜色，HexColor
backgroundColor	tab 的背景色，HexColor
borderStyle	tabBar上边框的颜色，仅支持 black/white

代码示例

tabbar上边框的颜色,根据设计图进行修改，隐藏则设置白色

// page.json设置	
  "tabBar": {
	  "borderStyle":"white",   //tabbar上边框的颜色，根据设计图进行修改，隐藏则白色设置
	  "custom": false,
	  "color": "#AAAAAA", // 文字的颜色
	  "selectedColor": "#EE6F54", // 文字选中时的颜色
	  "backgroundColor": "#fff", //tab 的背景色
	  "position": "bottom",
	}


  "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
   }