如何自定义微信小程序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学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
vue插槽slot的理解和使用方法
Apr 03 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正则
2006/07/07 PHP
我的论坛源代码(三)
2006/10/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python文件和流(实例讲解)
2017/09/12 Python
使用python实现链表操作
2018/01/26 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
自荐书封面下载
2013/11/29 职场文书
投资意向协议书
2015/01/29 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年纪委工作总结
2015/05/13 职场文书
摘录式读书笔记
2015/07/01 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
MySQL如何使备份得数据保持一致
2022/05/02 MySQL