编程 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 相关文章推荐

jquery键盘事件介绍

Jan 31 Javascript

javascript 快速排序函数代码

May 30 Javascript

js函数调用常用方法详解

Dec 03 Javascript

jquery 循环显示div的示例代码

Oct 18 Javascript

jQuery封装的tab选项卡插件分享

Jun 16 Javascript

JS实现浏览器状态栏显示时间的方法

Oct 27 Javascript

微信小程序request出现400的问题解决办法

May 23 Javascript

vue 组件高级用法实例详解

Apr 11 Javascript

详解Node.js 中使用 ECDSA 签名遇到的坑

Nov 26 Javascript

JavaScript复制变量三种方法实例详解

Jan 09 Javascript

详解Vue 单文件组件的三种写法

Feb 19 Javascript

vue路由实现登录拦截

Mar 24 Vue.js

微信小程序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判断ip黑名单程序代码实例

2014/02/24 PHP

php实现当前页面点击下载文件的简单方法

2016/09/22 PHP

PhpStorm 如何优雅的调试Hyperf的方法步骤

2019/11/24 PHP

Javascript hasOwnProperty 方法 & in 关键字

2008/11/26 Javascript

jquery自动完成插件(autocomplete)应用之PHP版

2009/12/15 Javascript

window.event.keyCode兼容IE和Firefox实现js代码

2013/05/30 Javascript

只需一行代码,轻松实现一个在线编辑器

2013/11/12 Javascript

Node.js node-schedule定时任务隔多少分钟执行一次的方法

2015/02/10 Javascript

超级简单实现JavaScript MVC 样式框架

2015/03/24 Javascript

JS iFrame加载慢怎么解决

2016/05/13 Javascript

jQuery实现的表格展开伸缩效果实例

2016/09/07 Javascript

Vue+axios 实现http拦截及路由拦截实例

2017/04/25 Javascript

Vue.js常用指令的使用小结

2017/06/23 Javascript

浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

2017/12/07 Javascript

Vue项目打包部署到iis服务器的配置方法

2019/10/14 Javascript

JavaScript实现文件下载并重命名代码实例

2019/12/12 Javascript

[02:08]2014DOTA2国际邀请赛 430专访：力争取得小组前二

2014/07/11 DOTA

[00:47]DOTA2荣耀之路6：天火，天火！

2018/05/30 DOTA

Python深入学习之装饰器

2014/08/31 Python

python类继承用法实例分析

2015/05/27 Python

python发送HTTP请求的方法小结

2015/07/08 Python

详解Python中表达式i += x与i = i + x是否等价

2017/02/08 Python

python3 判断列表是一个空列表的方法

2018/05/04 Python

python批量修改图片大小的方法

2018/07/24 Python

python之列表推导式的用法

2019/11/29 Python

python飞机大战pygame游戏背景设计详解

2019/12/17 Python

TensorFlow 显存使用机制详解

2020/02/03 Python

丝芙兰巴西官方商城：SEPHORA巴西

2016/10/31 全球购物

西海岸男士和男童服装：Johnnie-O

2018/03/15 全球购物

Nasty Gal英国：美国女性服饰销售网站

2021/03/02 全球购物

怎样在 Applet 中建立自己的菜单(MenuBar/Menu)？

2012/06/20 面试题

大学生标准推荐信范文

2013/11/25 职场文书

运动会广播稿80字

2014/01/23 职场文书

领导干部个人对照检查材料（群众路线）

2014/09/26 职场文书

考试作弊检讨书怎么写？

2014/12/21 职场文书

Go gorilla securecookie库的安装使用详解

2022/08/14 Golang