编程 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 上下banner替换具体实现

Nov 14 Javascript

javascript页面上使用动态时间具体实现

Mar 18 Javascript

js通过location.search来获取页面传来的参数

Sep 11 Javascript

JavaScript通过this变量快速找出用户选中radio按钮的方法

Mar 23 Javascript

js中跨域方法原理详解

Jul 19 Javascript

Javascript基于对象三大特性（封装性、继承性、多态性）

Jan 04 Javascript

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

Sep 21 Javascript

浅谈javascript:两种注释,声明变量,定义函数

Oct 05 Javascript

仿iframe效果Aajx文件上传实例

Nov 18 Javascript

微信小程序之滚动视图容器的实现方法

Sep 26 Javascript

vue el-upload上传文件的示例代码

Dec 21 Vue.js

vuex的使用和简易实现

Jan 07 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编程实现获取excel文档内容的代码实例

2011/06/28 PHP

PHP加密解密类实例代码

2016/07/20 PHP

setAttribute 与 class冲突解决

2008/02/17 Javascript

jQuery 动画基础教程

2008/12/25 Javascript

js中将具有数字属性名的对象转换为数组

2011/03/06 Javascript

js完美的div拖拽实例代码

2014/01/22 Javascript

jquery自动填充勾选框即把勾选框打上true

2014/03/24 Javascript

jquery获取一个元素下面相同子元素的个数代码

2014/07/31 Javascript

基于jQuery实现最基本的淡入淡出效果实例

2015/02/02 Javascript

JavaScript中的依赖注入详解

2015/03/18 Javascript

js实现多图左右切换功能

2016/08/04 Javascript

基于JavaScript实现随机颜色输入框

2016/12/10 Javascript

详解Angular-ui-BootStrap组件的解释以及使用

2018/07/13 Javascript

详解Vue项目部署遇到的问题及解决方案

2019/01/11 Javascript

vue.js click点击事件获取当前元素对象的操作

2020/08/07 Javascript

Python图形绘制操作之正弦曲线实现方法分析

2017/12/25 Python

pycharm 解除默认unittest模式的方法

2018/11/30 Python

Anaconda 查看、创建、管理和使用python环境的方法

2019/12/03 Python

在印度上传处方，在线订购药品：Medlife

2019/03/28 全球购物

德国最新街头服饰网上商店：BODYCHECK

2019/09/15 全球购物

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

2014/11/02 面试题

高三英语教学反思

2014/01/13 职场文书

翻译学院毕业生自荐书

2014/02/02 职场文书

《草原》教学反思

2014/02/15 职场文书

考察现实表现材料

2014/05/19 职场文书

关于教师节的广播稿

2014/09/10 职场文书

2014年林业工作总结

2014/12/05 职场文书

小学生交通安全寄语

2015/02/27 职场文书

前台接待岗位职责范本

2015/04/03 职场文书

重温入党誓词主持词

2015/06/29 职场文书

创业计划书之闲置物品置换中心

2019/12/25 职场文书

完美解决golang go get私有仓库的问题

2021/05/05 Golang

opencv用VS2013调试时用Image Watch插件查看图片

2021/07/26 Python

Java spring单点登录系统

2021/09/04 Java/Android

Python 数据可视化神器Pyecharts绘制图像练习

2022/02/28 Python

windows server 2016 域环境搭建的方法步骤(图文)

2022/06/25 Servers