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

更新时间：2019年07月09日 17:06:12 作者：不二很纯洁

这篇文章主要介绍了如何自定义微信小程序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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

小程序开发之云函数的使用教程详解
云函数是部署在云端的函数，他和小程序本地的函数存在很大的区别。本文将通过示例详细为大家介绍如何在小程序开发中使用云函数，需要的可以参考一下
2022-03-03
js字符编码函数区别分析
js对文字编码有3个函数： escape,encodeURI,encodeURIComponent，对应的解码函数：unescape,decodeURI,decodeURIComponent
2008-06-06
JavaScript控制两个列表框listbox左右交换数据的方法
这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
javascript中数组方法汇总
本文给大家详细汇总了一下javascript中的数组方法，十分的全面细致，有需要的小伙伴可以参考下。
2015-07-07
JS如何寻找数组中心索引过程解析
这篇文章主要介绍了JS如何寻找数组中心索引过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
Javascript小技能总结(推荐)
本文是小编日常收集整理的有个js中的一些小技能，非常实用，值得推荐给大家，感兴趣的朋友快来收藏吧
2016-06-06
JS格式化数字金额用逗号隔开保留两位小数
JS格式化数字金额只留两位小数。写了个格式化函数。可以控制小数位数，自动四舍五入，感兴趣的朋友可以了解下
2013-10-10
微信小程序实现选项卡功能
这篇文章主要为大家详细介绍了微信小程序实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
JS循环中正确使用async、await的姿势分享
async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2021-12-12
微信小程序实现上传多张图片、删除图片
这篇文章主要为大家详细介绍了微信小程序实现上传多张图片、删除图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06