编程 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开发中因空格引发的错误

Nov 08 Javascript

来自国外的30个基于jquery的Web下拉菜单

Jun 22 Javascript

jQuery mobile转换url地址及获取url中目录部分的方法

Dec 04 Javascript

AngularJS 最常用的功能汇总

Feb 17 Javascript

js老生常谈之this,constructor ,prototype全面解析

Apr 05 Javascript

js根据json数据中的某一个属性来给数据分组的方法

Oct 08 Javascript

js form表单input框限制20个字符，10个汉字代码实例

Apr 12 Javascript

Layui数据表格之单元格编辑方式

Oct 26 Javascript

微信小程序scroll-view的滚动条设置实现

Mar 02 Javascript

vue组件库的在线主题编辑器的实现思路

Apr 03 Javascript

node+vue实现文件上传功能

May 28 Javascript

VUE 单页面使用 echart 窗口变化时的用法

Jul 30 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常量的详解

2013/06/09 PHP

php缓冲 output_buffering的使用详解

2013/06/13 PHP

Smarty foreach控制循环次数的实现详解

2013/07/03 PHP

利用“多说”制作留言板、评论系统

2015/07/14 PHP

PHP环境中Memcache的安装和使用

2015/11/05 PHP

PHP中的静态变量及static静态变量使用详解

2015/11/05 PHP

Yii2.0高级框架数据库增删改查的一些操作

2015/11/16 PHP

Yii框架连表查询操作示例

2019/09/06 PHP

JavaScript使用cookie

2007/02/02 Javascript

javascript禁用键盘功能键让右击及其他键无效

2013/10/09 Javascript

Jquery 实现图片轮换

2015/01/28 Javascript

JavaScript高阶函数_动力节点Java学院整理

2017/06/28 Javascript

js匿名函数使用&传参(实例)

2017/09/08 Javascript

基于复选框demo(分享)

2017/09/27 Javascript

Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

2019/11/21 Javascript

[06:13]DOTA2进化论(修改版)

2013/10/08 DOTA

Python中用于去除空格的三个函数的使用小结

2015/04/07 Python

python编写爬虫小程序

2015/05/14 Python

Python实现截屏的函数

2015/07/25 Python

python3读取MySQL-Front的MYSQL密码

2017/05/03 Python

python3.6.3安装图文教程 TensorFlow安装配置方法

2020/06/24 Python

django+mysql的使用示例

2018/11/23 Python

Python给图像添加噪声具体操作

2019/03/03 Python

Django 后台获取文件列表 InMemoryUploadedFile的例子

2019/08/07 Python

简述 Python 的类和对象

2020/08/21 Python

python rsa-oaep加密的示例代码

2020/09/23 Python

浅谈anaconda python 版本对应关系

2020/10/07 Python

AMAVII眼镜官网：时尚和设计师太阳镜

2019/05/05 全球购物

文员个人求职自荐信

2013/09/21 职场文书

大型主题婚礼活动策划方案

2014/09/15 职场文书

研究生简历自我评

2015/03/11 职场文书

2015年度工程师评职称工作总结

2015/10/14 职场文书

2016年小学推普宣传周活动总结

2016/04/06 职场文书

如何使用Python提取Chrome浏览器保存的密码

2021/06/09 Python

Redis Stream类型的使用详解

2021/11/11 Redis

一文弄懂MySQL索引创建原则

2022/02/28 MySQL