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

Add a Formatted Table to a Word Document

Jun 15 Javascript

javaScript 利用闭包模拟对象的私有属性

Dec 29 Javascript

JS中prototype关键字的功能介绍及使用示例

Jul 21 Javascript

ExpressJS入门实例

Jan 14 Javascript

js电话号码验证方法

Sep 28 Javascript

JS简单实现String转Date的方法

Mar 02 Javascript

JS实现的适合做faq或menu滑动效果示例

Nov 17 Javascript

Node.js学习之TCP/IP数据通讯(实例讲解)

Oct 11 Javascript

JS简单实现点击跳转登陆邮箱功能的方法

Oct 31 Javascript

Vue请求JSON Server服务器数据的实现方法

Nov 02 Javascript

微信小程序实现省市区三级地址选择

Jun 21 Javascript

彻底搞懂并解决vue-cli4中图片显示的问题实现

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

PHPnow安装服务[apache_pn]失败的问题的解决方法

2010/09/10 PHP

laravel学习教程之关联模型

2016/07/30 PHP

thinkphp利用模型通用数据编辑添加和删除的实例代码

2016/11/20 PHP

PHP递归实现文件夹的复制、删除、查看大小操作示例

2017/08/11 PHP

TP3.2框架分页相关实现方法分析

2020/06/03 PHP

给文字加上着重号的JS代码

2013/11/12 Javascript

常用javascript表单验证汇总

2020/07/20 Javascript

javascript垃圾收集机制的原理分析

2016/12/08 Javascript

jQuery实现大图轮播

2017/02/13 Javascript

jquery实现一个全局计时器(商城可用)

2017/06/30 jQuery

一个简易时钟效果js实现代码

2020/03/25 Javascript

微信小程序下拉框搜索功能的实现方法

2019/07/31 Javascript

微信小程序模板消息推送的两种实现方式

2019/08/27 Javascript

Node.js path模块,获取文件后缀名操作

2020/11/07 Javascript

[02:36]DOTA2英雄基础教程斯拉克

2013/11/29 DOTA

[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG

2018/04/02 DOTA

Python程序设计入门(1)基本语法简介

2014/06/13 Python

Python中使用Flask、MongoDB搭建简易图片服务器

2015/02/04 Python

python实现Floyd算法

2018/01/03 Python

Python编程实现的简单神经网络算法示例

2018/01/26 Python

python实现数独游戏 java简单实现数独游戏

2018/03/30 Python

浅谈Series和DataFrame中的sort_index方法

2018/06/07 Python

Python实现个人微信号自动监控告警的示例

2019/07/03 Python

在Python函数中输入任意数量参数的实例

2019/07/16 Python

Tensorflow实现酸奶销量预测分析

2019/07/19 Python

python自动保存百度盘资源到百度盘中的实例代码

2019/08/26 Python

莫斯科高科技在线商店：KremlinStore

2019/03/13 全球购物

精选奢华：THE LIST

2019/09/05 全球购物

英国婚礼商城：Wedding Mall

2019/11/02 全球购物

会计与审计毕业生自荐信范文

2013/12/30 职场文书

4s店销售经理岗位职责

2014/07/19 职场文书

小学母亲节活动总结

2015/02/10 职场文书

介绍信格式样本

2015/05/05 职场文书

严以用权学习心得体会

2016/01/12 职场文书

小学思品教学反思

2016/02/20 职场文书

Python机器学习之逻辑回归

2021/05/11 Python