我們先來看一份圖，這個設置在官方文檔中已經寫得很清楚了，我只是做一個總結

注：我寫注釋是為了方便說明，在小程序中的json文件中是不能用注釋的
這個tabBar屬于全局屬性，因此就在全局配置文件app.json中配置

1.tabBar的配置

"color": "#8a8a8a","selectedColor": "#f40",//選中的顏色"backgroundColor": "#ffffff",//背景色"borderStyle": "black",//邊界線的顏色"position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會顯示圖標"list": [//組件的清單{"pagePath": "page/component/index",//頁面路徑"text": "組件",//組件上顯示的文字 "iconPath": "img/compont_un.png",//默認圖標"selectedIconPath": "img/compont_on.png"//選中后的圖標},{"pagePath": "page/API/index","text": "API","iconPath": "img/API_un.png","selectedIconPath": "img/API_on.png"},{"pagePath": "page/persion/index","text": "我的","iconPath": "img/我的_un.png","selectedIconPath": "img/我的_on.png"},{"pagePath": "pages/logs/logs","text": "日志","iconPath": "img/日志.png","selectedIconPath": "img/日志_on.png"}]},

最后再加一張圖，如果你設置了在頂部顯示，效果如下：

轉載于:https://www.cnblogs.com/Lyn4ever/p/11108078.html

總結

以上是生活随笔為你收集整理的微信小程序中的tabBar设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。