怎么自定义微信小程序tabbar上边框的颜色-创新互联

这篇文章主要介绍了怎么自定义微信小程序tabbar上边框的颜色，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

从网站建设到定制行业解决方案，为提供网站设计制作、成都网站建设服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联建站将不断加快创新步伐，提供优质的建站服务。

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

怎么自定义微信小程序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上边框的颜色”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容