在

背景：

微信小程序的实际开发过程中，有时需要修改微信小程序提供的tabBar组件的上边框颜色，以满足项目要求。

解决方案：

方式一：

通过tabBar组件附带的borderStyle属性控制边框颜色，并将边框颜色设置为白色，如以下代码所示：

BorderStyle''white '所有代码：

a文件

TabBar'{

Color''#7B7E82 '

SelectedColor''#333333 '

BorderStyle''white '

目录' [

page path ' ' pages/index/index '

文本“:”主页，

IconPath ' ' image而且，

SelectedIconPath ' ' image

}，{

page path ' ' pages/index/index '

文本“:”服务预订，

IconPath ' ' image而且，

SelectedIconPath ' ' image

}，{

page path ' ' pages/cemetery/cemetery '

文本“:”公墓服务，

IconPath ' ' image而且，

SelectedIconPath ' ' image

}，{

PagePath''pages/me/me '

文字' '我的'

IconPath ' ' image而且，

SelectedIconPath ' ' image

}]

}但是，通过这种方式只能设置white和black。否则，将出现以下错误：

方式二：

1；首先，将tabBar组件附带的borderStyle的颜色设置为white。默认背景色为白色，将边框设置为白色与隐藏边框相同

2、通过在a中添加以下样式，实现了自定义tabBar颜色目的(实际上在页面底部自定义了线条)

/* *修改tabbar线条：* */

第：3360页适配器{

内容： ' '

Position:fixed:

左边：0；

Bottom:0

width :100%；

海特：2 rpx

background-color : # eeee；

Z-索引：9999；

}效果图表：

注：

如果其他页面不需要下边框，请按如下方式选择当前页面的。您只需在wxss文件中添加复盖页面样式的代码。

第：3360页before {

海特： 0 rpx

}