编程 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 自定义事件初探

Aug 21 Javascript

ie下动态加态js文件的方法

Sep 13 Javascript

js 用CreateElement动态创建标签示例

Nov 20 Javascript

巧用jquery解决下拉菜单被Div遮挡的相关问题

Feb 13 Javascript

使用jQuery实现验证上传图片的格式与大小

Dec 03 Javascript

jQuery中:eq()选择器用法实例

Dec 29 Javascript

javascript中DOM复选框选择用法实例

May 14 Javascript

基于WebUploader的文件上传js插件

Aug 19 Javascript

使用FileReader API创建Vue文件阅读器组件

Apr 03 Javascript

微信小程序出现wx.getLocation再次授权问题的解决方法分析

Jan 16 Javascript

详解Vue-Router源码分析路由实现原理

May 15 Javascript

微信小程序之侧边栏滑动实现过程解析（附完整源码）

Aug 23 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

Win2003服务器安全加固设置－-进一步提高服务器安全性

2007/05/23 PHP

php格式化工具Beautify PHP小小BUG

2008/04/24 PHP

MySQL数据源表结构图示

2008/06/05 PHP

jQuery+php实现ajax文件即时上传的详解

2013/06/17 PHP

ThinkPHP模板之变量输出、自定义函数与判断语句用法

2014/11/01 PHP

[原创]smarty简单模板变量输出方法

2016/07/09 PHP

php生成二维码图片方法汇总

2016/12/17 PHP

基于Jquery的淡入淡出的特效基础练习

2010/12/13 Javascript

jquery 操作日期、星期、元素的追加的实现代码

2012/02/07 Javascript

固定网页背景图同时保持图片比例的思路代码

2013/08/15 Javascript

基于jQuery实现的文字按钮表单特效整理

2014/12/07 Javascript

javascript实现点击提交按钮后显示loading的方法

2015/07/03 Javascript

jquery实现向下滑出的二级导航下滑菜单效果

2015/08/25 Javascript

基于jquery实现ajax无刷新评论

2020/08/19 Javascript

用jQuery获取table中行id和td值的实现代码

2016/05/19 Javascript

js控制台输出的方法(详解)

2016/11/26 Javascript

基于JavaScript实现自定义滚动条

2017/01/25 Javascript

JavaScript简单拖拽效果（1）

2017/05/17 Javascript

使用vue与jquery实时监听用户输入状态的操作代码

2017/09/19 jQuery

JS实现图片转换成base64的各种应用场景实例分析

2018/06/22 Javascript

jQuery利用FormData上传文件实现批量上传

2018/12/04 jQuery

Vue 组件参数校验与非props特性的方法

2019/02/12 Javascript

Flexible.js可伸缩布局实现方法详解

2020/11/13 Javascript

Python的Tornado框架异步编程入门实例

2015/04/24 Python

python logging日志模块以及多进程日志详解

2018/04/18 Python

Python 微信之获取好友昵称并制作wordcloud的实例

2019/02/21 Python

python 两种方法修改文件的创建时间、修改时间、访问时间

2020/09/26 Python

Django限制API访问频率常用方法解析

2020/10/12 Python

介绍下Java的输入输出流

2014/01/22 面试题

如果重写了对象的equals()方法，需要考虑什么

2014/11/02 面试题

大专毕业生简历的自我评价

2013/10/20 职场文书

医学检验专业大学生求职信

2013/11/18 职场文书

应用英语专业自荐信

2014/01/26 职场文书

3分钟演讲稿

2014/04/30 职场文书

先进事迹演讲稿

2014/09/01 职场文书

使用python求解迷宫问题的三种实现方法

2022/03/17 Python