编程 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 相关文章推荐

JavaScript 定义function的三种方式小结

Oct 16 Javascript

js 剪切板的用法(clipboardData.setData)与js match函数介绍

Nov 19 Javascript

浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

Jan 10 Javascript

js中array的sort()方法使用介绍

Feb 20 Javascript

详解JavaScript的流程控制语句

Nov 30 Javascript

jquery 遍历数组 each 方法详解

May 25 Javascript

jquery+CSS3实现3D拖拽相册效果

Jul 18 Javascript

ES6新特性七：数组的扩充详解

Apr 21 Javascript

详解在Angular项目中添加插件ng-bootstrap

Jul 04 Javascript

微信小程序表单验证form提交错误提示效果

Jun 19 Javascript

浅谈Vue组件单元测试究竟测试什么

Feb 05 Javascript

vue中使用vue-print.js实现多页打印

Mar 05 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中关于普通表单多文件上传的处理方法

2011/03/25 PHP

php5.x禁用eval的操作方法

2018/10/19 PHP

Javascript实例教程(19) 使用HoTMetal(5)

2006/12/23 Javascript

Javascript 二维数组

2009/11/26 Javascript

js文件缓存之版本管理详解

2013/07/05 Javascript

jQuery复制表单元素附源码分享效果演示

2015/09/30 Javascript

JS实现环形进度条（从0到100%）效果

2016/07/05 Javascript

浅谈$('div a') 与$('div>a')的区别

2016/07/18 Javascript

jQuery组件easyui对话框实现代码

2016/08/25 Javascript

jQuery tagsinput在h5邮件客户端中应用详解

2016/09/26 Javascript

jQuery 局部div刷新和全局刷新方法总结

2016/10/05 Javascript

通过修改360抢票的刷新频率和突破8车次限制实现方法

2017/01/04 Javascript

js仿新浪微博消息发布功能

2017/02/17 Javascript

微信小程序之购物车功能

2020/09/23 Javascript

vue对storejs获取的数据进行处理时遇到的几种问题小结

2018/03/20 Javascript

Vue下拉框回显并默认选中随机问题

2018/09/06 Javascript

解决百度Echarts图表坐标轴越界的方法

2018/10/17 Javascript

在layui中对table中的数据进行判断(0、1)转换为提示信息的方法

2019/09/28 Javascript

three.js 将图片马赛克化的示例代码

2020/07/31 Javascript

python实现从网络下载文件并获得文件大小及类型的方法

2015/04/28 Python

用Python程序抓取网页的HTML信息的一个小实例

2015/05/02 Python

Python功能键的读取方法

2015/05/28 Python

利用python画一颗心的方法示例

2017/01/31 Python

简单了解什么是神经网络

2017/12/23 Python

Python sklearn KFold 生成交叉验证数据集的方法

2018/12/11 Python

keras获得某一层或者某层权重的输出实例

2020/01/24 Python

详解Python中namedtuple的使用

2020/04/27 Python

HTML5 b和i标记将被赋予真正的语义

2009/07/16 HTML / CSS

可口可乐唇膏：Lip Smackers

2019/08/27 全球购物

你的创业计划书怎样才能打动风投

2014/02/06 职场文书

教师产假请假条

2014/04/10 职场文书

中华美德颂演讲稿

2014/05/20 职场文书

大学生考试作弊检讨书1000字

2014/10/14 职场文书

党小组意见范文

2015/06/08 职场文书

幼儿园教师读书笔记

2015/06/29 职场文书

win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法

2022/04/08 数码科技