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

线路分流自动跳转代码；希望对大家有用！

Dec 02 Javascript

javascript检测页面是否缩放的小例子

May 16 Javascript

页面加载完毕后滚动条自动滚动一定位置

Feb 20 Javascript

JavaScript判断变量是对象还是数组的方法

Aug 28 Javascript

如何使用HTML5地理位置定位功能

Apr 27 Javascript

基于JS实现省市联动效果代码分享

Jun 06 Javascript

微信小程序之ES6与事项助手的功能实现

Nov 30 Javascript

详解Jquery的事件操作和文档操作

Dec 19 Javascript

Angular 2父子组件数据传递之@Input和@Output详解(下)

Jul 05 Javascript

vue动态路由:路由参数改变,视图不更新问题的解决

Nov 05 Javascript

解决ant Design Search无法输入内容的问题

Oct 29 Javascript

vue 使用饿了么UI仿写teambition的筛选功能

Mar 01 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

在IIS上安装PHP4.0正式版

2006/10/09 PHP

PHP基础学习之流程控制的实现分析

2013/04/28 PHP

2013/06/06 PHP

php限制ip地址范围的方法

2015/03/31 PHP

PHP使用星号隐藏用户名,手机和邮箱的实现方法

2016/09/22 PHP

Js的MessageBox

2006/12/03 Javascript

简略说明Javascript中的= =(等于)与= = =(全等于)区别

2013/04/16 Javascript

jQuery拖拽div实现思路

2014/02/19 Javascript

node.js中的http.response.writeHead方法使用说明

2014/12/14 Javascript

jQuery获取select选中的option的value值实现方法

2016/08/29 Javascript

[原创]javascript typeof id==='string'?document.getElementById(id):id解释

2016/11/02 Javascript

react-redux中connect的装饰器用法@connect详解

2018/01/13 Javascript

Vue中mintui的field实现blur和focus事件的方法

2018/08/25 Javascript

详解在vue-cli中使用graphql即vue-apollo的用法

2018/09/08 Javascript

使用FormData实现上传多个文件

2018/12/04 Javascript

jQuery实现的3D版图片轮播示例【滑动轮播】

2019/01/18 jQuery

关于layui的动态图标不显示的解决方法

2019/09/04 Javascript

layui--select使用以及下拉框实现键盘选择的例子

2019/09/24 Javascript

Vue-cli3项目引入Typescript的实现方法

2019/10/18 Javascript

node crawler如何添加promise支持

2020/02/01 Javascript

JavaScript中交换值的10种方法总结

2020/08/18 Javascript

Python 学习笔记

2008/12/27 Python

详解Django rest_framework实现RESTful API

2018/05/24 Python

Tensorflow卷积神经网络实例

2018/05/24 Python

python pandas 对series和dataframe的重置索引reindex方法

2018/06/07 Python

小白入门篇使用Python搭建点击率预估模型

2018/10/12 Python

简单了解django orm中介模型

2019/07/30 Python

python应用文件读取与登录注册功能

2019/09/23 Python

详解使用Python写一个向数据库填充数据的小工具(推荐)

2020/09/11 Python

html5超简单的localStorage实现记住密码的功能实现

2017/09/07 HTML / CSS

服装发布会策划方案

2014/05/22 职场文书

会计人员演讲稿

2014/09/11 职场文书

工作服管理制度范本

2015/08/06 职场文书

幼儿园师德师风心得体会

2016/01/12 职场文书

遇事可以测出您的见识与格局

2019/09/16 职场文书

Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法

2022/04/06 数码科技