这篇文章主要介绍了怎么自定义微信小程序tabbar上边框的颜色，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
我们知道tabbar上边框的颜色是通过 tabBar 的 borderStyle 属性设置的，只支持两个值 black / white，参见文档 tabBar
示例，红色
解决办法
其实很简单，自己画一条线定位在页面最底部就可以了，我们可以利用小程序类似于网页 <html> 标签的 <page>标签，在全局样式中加入如下：
app.wxss
page::before{
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}同理，也可以给最上面也加入一个分割线，如下：
page::after{
content: '';
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}其他
是不是很简单，如果在某个页面不需要分割线，只需在当前页面的 wxss 文件里重置 page 的样式即可，如下：
details.wxss
page::before{
height: 0rpx;
}感谢你能够认真阅读完这篇文章，希望小编分享的“怎么自定义微信小程序tabbar上边框的颜色”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
