如何自定义微信小程序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字符编码函数区别分析

    js对文字编码有3个函数: escape,encodeURI,encodeURIComponent, 对应的解码函数:unescape,decodeURI,decodeURIComponent
    2008-06-06
  • JavaScript控制两个列表框listbox左右交换数据的方法

    JavaScript控制两个列表框listbox左右交换数据的方法

    这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • javascript中数组方法汇总

    javascript中数组方法汇总

    本文给大家详细汇总了一下javascript中的数组方法,十分的全面细致,有需要的小伙伴可以参考下。
    2015-07-07
  • JS如何寻找数组中心索引过程解析

    JS如何寻找数组中心索引过程解析

    这篇文章主要介绍了JS如何寻找数组中心索引过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • Javascript小技能总结(推荐)

    Javascript小技能总结(推荐)

    本文是小编日常收集整理的有个js中的一些小技能,非常实用,值得推荐给大家,感兴趣的朋友快来收藏吧
    2016-06-06
  • JS格式化数字金额用逗号隔开保留两位小数

    JS格式化数字金额用逗号隔开保留两位小数

    JS格式化数字金额只留两位小数。写了个格式化函数。可以控制小数位数,自动四舍五入,感兴趣的朋友可以了解下
    2013-10-10
  • 微信小程序实现选项卡功能

    微信小程序实现选项卡功能

    这篇文章主要为大家详细介绍了微信小程序实现选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • 微信小程序实现上传多张图片、删除图片

    微信小程序实现上传多张图片、删除图片

    这篇文章主要为大家详细介绍了微信小程序实现上传多张图片、删除图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06

最新评论