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

最新推荐文章于 2024-09-02 12:25:42 发布

勇敢的小趴菜

最新推荐文章于 2024-09-02 12:25:42 发布

阅读量3.5k

点赞数 1

分类专栏：小程序默认样式修改文章标签： tabbar 小程序自定义 tabbar上边框的颜色 tabbar上边框的样式 tabbar默认样式的修改

本文链接：https://blog.csdn.net/YiMiMMMi/article/details/100662563

版权

小程序默认样式修改专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
方法一（好处是简单明了直接的修改成白色线条，从而隐藏掉线条）：
“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;
}