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

微信(小程序)  /  管理员 发布于 3年前   1032

我们知道tabbar上边框的颜色是通过 tabBar 的 borderStyle 属性设置的，只支持两个值 black / white，参见文档 tabBar

示例，红色

解决办法

其实很简单，自己画一条线定位在页面最底部就可以了，我们可以利用小程序类似于网页 标签的 标签，在全局样式中加入如下：

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 custom-tab-bar 6s出不来解决方案(cover-view不兼容)
• 微信小程序自定义tabBar在uni-app的适配详解
• 微信小程序官方动态自定义底部tabBar的例子
• 微信小程序tabBar 返回tabBar不刷新页面
• vue组件tabbar使用方法详解
• 微信小程序自定义tabBar组件开发详解
• 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
• 微信小程序自定义菜单切换栏tabbar组件代码实例