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