如何自定義微信小程序tabbar上邊框的顏色
更新時(shí)間：2019年07月09日 17:06:12 作者：不二很純潔
這篇文章主要介紹了如何自定義微信小程序tabbar上邊框的顏色,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
我們知道tabbar上邊框的顏色是通過 tabBar 的 borderStyle 屬性設(shè)置的，只支持兩個(gè)值 black / white，參見文檔 tabBar
示例，紅色
解決辦法
其實(shí)很簡單，自己畫一條線定位在頁面最底部就可以了，我們可以利用小程序類似于網(wǎng)頁 <html> 標(biāo)簽的 <page>標(biāo)簽，在全局樣式中加入如下：
app.wxss
page::before{
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}
同理，也可以給最上面也加入一個(gè)分割線，如下：
page::after{
content: '';
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 2rpx;
background-color: #F6F8FC;
z-index: 9999;
}
其他
是不是很簡單，如果在某個(gè)頁面不需要分割線，只需在當(dāng)前頁面的 wxss 文件里重置 page 的樣式即可，如下：
details.wxss
page::before{
height: 0rpx;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript在IE和FireFox中的不同表現(xiàn)簡析
本文將詳細(xì)介紹Javascript在IE和FireFox中的不同表現(xiàn)，本人整理了一下，需要的朋友可以參考下2012-12-12
js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博
這篇文章主要介紹了js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博,需要的朋友可以參考下2015-12-12
canvas有一個(gè)神奇的方法getImageData，它可以獲取canvas內(nèi)圖像的每一個(gè)像素點(diǎn)的顏色值獲取，而且可以改變。本文將對canvas實(shí)現(xiàn)圖片的濾鏡轉(zhuǎn)化的方法進(jìn)行介紹，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS小游戲之宇宙戰(zhàn)機(jī)源碼,是一款非常經(jīng)典的游戲源碼,包含了游戲設(shè)計(jì)中比較常見的邏輯處理,本文附帶了該游戲的完整源碼,需要的朋友可以參考下2014-09-09
本文主要介紹了js中常用的Math方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實(shí)現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿?，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應(yīng)用，希望本文對你有所幫助2013-01-01
如何使用js生成pdf文件呢，下面通過本文給大家分享JavaScript代碼生成PDF文件的方法，需要的朋友參考下吧2016-02-02
如何用JavaScript實(shí)現(xiàn)一個(gè)數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實(shí)現(xiàn)一個(gè)數(shù)組惰性求值庫，對惰性求值感興趣的同學(xué)，可以參考下2021-05-05
JS中的.length屬性和.size()方法的區(qū)別
length是js原生屬性,size()是jQuery方法,如果你只是想獲取元素的個(gè)數(shù),兩者效果一樣既.length和.size()獲取的值是一樣的2024-08-08
使用js實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實(shí)現(xiàn)數(shù)據(jù)格式化為字符串，非常的實(shí)用，這里推薦給有相同需求的小伙伴。2014-12-12