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


Posted in Javascript onJuly 09, 2019

我们知道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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 #Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
You might like
php中取得URL的根域名的代码
2011/03/23 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP中session变量的销毁
2014/02/27 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JS实现标签滚动切换效果
2017/12/25 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
原生js实现购物车
2020/09/23 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
老干部工作先进集体事迹材料
2014/05/21 职场文书
股份合作协议书
2014/09/10 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
初中同学会致辞
2015/08/01 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2019新员工心得体会
2019/06/25 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL