如何自定义微信小程序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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
详解jQuery中的事件
Dec 14 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
js 发布订阅模式的实例讲解
Sep 10 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
Bootstrap插件全集
2016/07/18 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
给分销商的致歉信
2014/01/14 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
绘画专业自荐信
2014/07/04 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
幼师自荐信范文
2015/03/06 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python