如何自定义小程序tabbar上边框的颜色

如何自定义小程序tabbar上边框的颜色_第1张图片
方法一(好处是简单明了直接的修改成白色线条,从而隐藏掉线条):
“tabBar”: {
“selectedColor”: “#01A3D1”,
“color”: “#a1a1a1”,
“backgroundColor”: “#ebf4fb”,
"borderStyle": “white”,
“list”: [
{
“pagePath”: “pages/message/message”,
“text”: “消息”,
“iconPath”: “images/tab1.png”,
“selectedIconPath”: “images/tab1s.png”
},
{
“pagePath”: “pages/equip/equip”,
“text”: “设备”,
“iconPath”: “images/tab2.png”,
“selectedIconPath”: “images/tab2s.png”
},
{
“pagePath”: “pages/my/my”,
“text”: “我的”,
“iconPath”: “images/tab3.png”,
“selectedIconPath”: “images/tab3s.png”
}
]
},
方法二(好处是可以修改默认颜色):
修改页面顶部线条:
page::before{
content: ‘’;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}
修改tabbar线条:
page::after{
content: ‘’;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}

你可能感兴趣的:(小程序默认样式修改,tabbar,小程序自定义,tabbar上边框的颜色,tabbar上边框的样式,tabbar默认样式的修改)