编程 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 For Beginners(转载)

Jan 05 Javascript

idTabs基于JQuery的根据URL参数选择Tab插件

Apr 11 Javascript

用js代码改变单选框选中状态的简单实例

Dec 18 Javascript

用jquery修复在iframe下的页面锚点失效问题

Aug 22 Javascript

jquery实现html页面 div 假分页有原理有代码

Sep 06 Javascript

javascript修改图片src的方法

Jan 27 Javascript

Bootstrap3 Grid system原理及应用详解

Sep 30 Javascript

关于使用axios的一些心得技巧分享

Jul 02 Javascript

js链表操作(实例讲解)

Aug 29 Javascript

vue.js 实现图片本地预览裁剪压缩上传功能

Mar 01 Javascript

详解Node.js读写中文内容文件操作

Oct 10 Javascript

webpack3里使用uglifyjs压缩js时打包报错的解决

Dec 13 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+ajax做仿百度搜索下拉自动提示框(有实例)

2012/08/21 PHP

php实现Mongodb自定义方式生成自增ID的方法

2015/03/23 PHP

Laravel网站打开速度优化的方法汇总

2017/07/16 PHP

javascript json 新手入门文档

2009/12/03 Javascript

imgAreaSelect 中文文档帮助说明

2011/10/08 Javascript

js清空表单数据的两种方式(遍历+reset)

2014/07/18 Javascript

js插件dropload上拉下滑加载数据实例解析

2016/07/27 Javascript

Vue响应式添加、修改数组和对象的值

2017/03/20 Javascript

javascript 开发之网页兼容各种浏览器

2017/09/28 Javascript

JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

2017/10/25 Javascript

QRCode.js二维码生成并能长按识别

2018/10/16 Javascript

优化Python代码使其加快作用域内的查找

2015/03/30 Python

Python下的twisted框架入门指引

2015/04/15 Python

浅析Python中的join()方法的使用

2015/05/19 Python

Python中的自省（反射）详解

2015/06/02 Python

Python 闭包的使用方法

2017/09/07 Python

浅谈dataframe中更改列属性的方法

2018/07/10 Python

使用python判断jpeg图片的完整性实例

2019/06/10 Python

Python远程开发环境部署与调试过程图解

2019/12/09 Python

pytorch之Resize()函数具体使用详解

2020/02/27 Python

pytorch cuda上tensor的定义以及减少cpu的操作详解

2020/06/23 Python

Python Pandas数据分析工具用法实例

2020/11/05 Python

Currentbody德国站：健康与美容技术专家

2020/04/05 全球购物

生产现场工艺工程师岗位职责

2013/11/28 职场文书

教学大赛获奖感言

2014/01/15 职场文书

高二地理教学反思

2014/01/24 职场文书

三个儿子教学反思

2014/02/03 职场文书

赔偿协议书范本

2014/04/15 职场文书

理想点亮人生演讲稿

2014/05/21 职场文书

酒店开业庆典策划方案

2014/05/28 职场文书

货物运输服务质量承诺书

2014/05/29 职场文书

设备管理实施方案

2014/05/31 职场文书

医院领导班子整改方案

2014/10/01 职场文书

公司周年庆典标语

2014/10/07 职场文书

Python趣味爬虫之用Python实现智慧校园一键评教

2021/05/28 Python

win11无线投屏在哪设置? win11无线投屏功能的使用方法

2022/04/08 数码科技