编程 Javascript

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

Posted in Javascript onJuly 09, 2019

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

- Author -

不二很纯洁

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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