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

来源：动视网责编：小采时间：2020-11-27 21:54:01

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

如何自定义微信小程序tabbar上边框的颜色:我们知道tabbar上边框的颜色是通过 tabBar 的 borderStyle 属性设置的，只支持两个值 black / white，参见文档 tabBar 示例，红色解决办法其实很简单，自己画一条线定位在页面最底部就可以了，我们可以利用小程序类似于网页 <html>

推荐度：

点击下载本文 文档为doc格式

导读如何自定义微信小程序tabbar上边框的颜色:我们知道tabbar上边框的颜色是通过 tabBar 的 borderStyle 属性设置的，只支持两个值 black / white，参见文档 tabBar 示例，红色解决办法其实很简单，自己画一条线定位在页面最底部就可以了，我们可以利用小程序类似于网页 <html>

我们知道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上边框的颜色

推荐度：

点击下载本文 文档为doc格式

标签：微信小程序微信小程序

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐