我們先來看一份圖，這個(gè)設(shè)置在官方文檔中已經(jīng)寫得很清楚了，我只是做一個(gè)總結(jié)

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

1.tabBar的配置

"color": "#8a8a8a","selectedColor": "#f40",//選中的顏色"backgroundColor": "#ffffff",//背景色"borderStyle": "black",//邊界線的顏色"position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會(huì)顯示圖標(biāo)"list": [//組件的清單{"pagePath": "page/component/index",//頁面路徑"text": "組件",//組件上顯示的文字 "iconPath": "img/compont_un.png",//默認(rèn)圖標(biāo)"selectedIconPath": "img/compont_on.png"//選中后的圖標(biāo)},{"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"}]},

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

轉(zhuǎn)載于:https://www.cnblogs.com/Lyn4ever/p/11108078.html

總結(jié)

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

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