背景：

在微信小程序的實際開發(fā)過程中，有時候我們需要修改微信小程序提供的 tabBar 組件頂部邊框的顏色，以滿足項目需求

解決方案：

方式一：

通過tabBar組件自帶的 borderStyle 屬性來控制邊框的顏色，將邊框的顏色設置為白色，如下代碼：

"borderStyle":?"white",

全部代碼：

app.json文件

??"tabBar":?{????"color":?"#7B7E82",????"selectedColor":?"#333333",????"borderStyle":?"white",????"list":?[{??????"pagePath":?"pages/index/index",??????"text":?"首頁",??????"iconPath":?"images/home_default.png",??????"selectedIconPath":?"images/home_select.png"????},{??????"pagePath":?"pages/index/index",??????"text":?"服務預約",??????"iconPath":?"images/service_default.png",??????"selectedIconPath":?"images/service_select.png"????},{??????"pagePath":?"pages/cemetery/cemetery",??????"text":?"公墓服務",??????"iconPath":?"images/cemetery_default.png",??????"selectedIconPath":?"images/cemetery_select.png"????},{??????"pagePath":?"pages/me/me",??????"text":?"我的",??????"iconPath":?"images/me_default.png",??????"selectedIconPath":?"images/me_select.png"????}]??}

但是，通過這種方式，只能設置 white和 black ，如若不是，會爆以下錯誤：

方式二：

1、首先將 tabBar組件自帶的 borderStyle 的顏色設置為 white (因為默認背景色為白色，將邊框設置為白色，就相當于隱藏邊框)

2、給app.wxss添加如下樣式，已達到自定義 tabBar 顏色的目的(其實就是在頁面的底部自定義一條線)

/**修改tabbar線條：**/page::after{??content:?"";??position:?fixed;??left:?0;??bottom:?0;??width:?100%;??height:?2rpx;??background-color:?#EEEEEE;??z-index:?9999;}

效果圖：

注意：

如若其它頁面不需要底部的邊框線，那么只需要給當前頁面的.wxss文件添加一個覆蓋page樣式的代碼，具體如下：

page::before{ height: 0rpx;}

總結

以上是生活随笔為你收集整理的微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。