如何自定義微信小程序tabbar上邊框的顏色
更新時(shí)間：2019年07月09日 17:06:12 作者：不二很純潔
這篇文章主要介紹了如何自定義微信小程序tabbar上邊框的顏色,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
我們知道tabbar上邊框的顏色是通過(guò) tabBar 的 borderStyle 屬性設(shè)置的，只支持兩個(gè)值 black / white，參見(jiàn)文檔 tabBar
示例，紅色
解決辦法
其實(shí)很簡(jiǎn)單，自己畫(huà)一條線定位在頁(yè)面最底部就可以了，我們可以利用小程序類似于網(wǎng)頁(yè) <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;
}
其他
是不是很簡(jiǎn)單，如果在某個(gè)頁(yè)面不需要分割線，只需在當(dāng)前頁(yè)面的 wxss 文件里重置 page 的樣式即可，如下：
details.wxss
page::before{
height: 0rpx;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí)，您遇到過(guò)麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開(kāi)源 Mozilla 瀏覽器上時(shí)的常見(jiàn)問(wèn)題。首先討論跨瀏覽器開(kāi)發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
深入理解JavaScript系列（16） 閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來(lái)討論的話題 —— 閉包（closure）。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來(lái)討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
Bootstrap 粘頁(yè)腳，說(shuō)得具體一點(diǎn)就是“將固定高度的頁(yè)腳緊貼頁(yè)面底部”，本文給大家分享具有實(shí)現(xiàn)代碼，感興趣的朋友參考下吧2016-03-03
JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性
這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下2017-07-07
js獲得指定控件輸入光標(biāo)的坐標(biāo)兼容IE,Chrome,火狐等多種主流瀏覽器
js獲得指定控件光標(biāo)的坐標(biāo)，兼容IE,Chrome,火狐等多種主流瀏覽器，實(shí)現(xiàn)代碼及調(diào)用代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
這篇文章主要介紹了詳解性能更優(yōu)越的小程序圖片懶加載方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了小程序用戶登錄狀態(tài)檢查與更新實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
javascript appendChild,innerHTML,join性能比較代碼
在實(shí)際應(yīng)用中，應(yīng)該避免直接用innerHTML，對(duì)于大量的字符連接運(yùn)算，應(yīng)該考慮先運(yùn)算再輸出。2009-08-08