效果圖
操作步驟：?
1 在app.json找到?pages，增加pages配置地址欄路徑，保存后會(huì)自動(dòng)生成相應(yīng)文件夾；
2，增加??tabBar? 參數(shù)，“selectedColor” 參數(shù)是設(shè)置選中后文字的顏色；"list" 中放置導(dǎo)航數(shù)據(jù)。
? ? ?list 中 相關(guān)參數(shù)：?pagePath ----> 指向地址
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text? ?---->? ?導(dǎo)航文字
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??iconPath? ?----->? 導(dǎo)航圖標(biāo)文章來源：http://www.zghlxwxcb.cn/news/detail-523448.html
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??selectedIconPath? ----->? 選中狀態(tài)下導(dǎo)航圖標(biāo)? ? ? ? ?文章來源地址http://www.zghlxwxcb.cn/news/detail-523448.html
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/mine/mine",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小哲個(gè)人商店",
"navigationBarTextStyle": "black",
"backgroundColor": "#eeeeee"
},
"tabBar": {
"selectedColor": "#fc5531",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
"iconPath": "./images/home.png",
"selectedIconPath": "./images/selected-home.png"
},
{
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "./images/list.png",
"selectedIconPath": "./images/selected-list.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "./images/mine.png",
"selectedIconPath": "./images/selected-mine.png"
}
]
},
"debug": true,
"style": "v2",
"sitemapLocation": "sitemap.json"
}到了這里，關(guān)于微信小程序01-底部導(dǎo)航欄設(shè)置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
