如何自定义微信小程序tabbar上边框的颜色
2019-07-09 17:06
1311 查看
我们知道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上的文字和图标的颜色
- Android-如何给View添加边框,边框颜色和线的粗细可以自定义
- 微信小程序如何实现自定义tabBar
- 如何更改 iOS7 中的未选定的 tabbaritem 颜色
- 「前端开发者」如何把握住「微信小程序」这波红利?
- 如何在TabBar上自定义添加个性按钮
- Flex中如何设置进度条(ProgressBar)边框颜色的例子
- tabBar选项卡的背景色如何修改(自定义tabBar)&&推送nav到指定(根)视图控制器
- 微信小程序学习:如何在手机上查看调试微信小程序&如何使用sublime开发微信小程序
- 如何给微信房卡牛牛源码添加自定义数据结构
- Word中如何设置表格的边框线样式和颜色
- WP7中,如何自定义ProgressBar的高度,颜色,和透明度
- 如何修改PPT表格的边框颜色
- 自定义tabBar如何移除系统自带的TabBarItemButton
- 微信的多客服功能放在自定义菜单里面 这个功能如何实现?
- 微信小程序如何自定义table组件
- Swift中如何通过KVC将自定义的UITabbar设置为UITabbarController的tabbar
- iOS开发 UISearchController的cancel按钮自定义中文取消,改变按钮标题颜色,去掉边框线
- 分享到微信时如何自定义文字描述和图片
- POI如何自定义单元格背景颜色