如何自定义微信小程序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 相关文章推荐
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&gt;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 数码科技