如何自定义微信小程序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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
ExpressJS入门实例
Jan 14 Javascript
js电话号码验证方法
Sep 28 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
laravel学习教程之关联模型
2016/07/30 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
给文字加上着重号的JS代码
2013/11/12 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python实现Floyd算法
2018/01/03 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
小学母亲节活动总结
2015/02/10 职场文书
介绍信格式样本
2015/05/05 职场文书
严以用权学习心得体会
2016/01/12 职场文书
小学思品教学反思
2016/02/20 职场文书
Python机器学习之逻辑回归
2021/05/11 Python