编程 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的数字改变的动画效果--可用来做计数器

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