大部分小程序都是有底部導航欄的，具體怎麼實現呢，需要在app.json中配置，下面上代碼
{
"pages": [
"pages/index/index",
"pages/yonge/index",
"pages/mine/mine"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "yongetest",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/home.png",
"iconPath": "images/home.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/yonge-selected.png",
"iconPath": "images/yonge.png",
"pagePath": "pages/yonge/index",
"text": "詠鵝"
},
{
"selectedIconPath": "images/mine.png",
"iconPath": "images/mine.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
}
}
tabBar裏面列出來的就是你的導航欄，效果如下
參數解釋一下
tabBar：指底部的導航配置屬性
color：底部導航未選中時文字的顏色
selectedColor：底部導航選中時文字的顏色
borderStyle：底部導航邊框的樣色（注意 這裏如果沒有寫入樣式 會導致 導航框上邊框會出現默認的淺灰色線條）
list：導航配置數組
selectedIconPath：選中時icon路徑
iconPath：未選中時icon路徑
pagePath：頁面訪問地址，就是你自己寫的page的路徑
text：導航圖標下方文字