這篇文章主要介紹了微信小程序中底部導(dǎo)航欄怎么實(shí)現(xiàn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注于芮城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。芮城網(wǎng)站建設(shè)公司,為芮城等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)底部導(dǎo)航欄是如何實(shí)現(xiàn)？即點(diǎn)擊底部的導(dǎo)航，會(huì)實(shí)現(xiàn)不同對(duì)應(yīng)頁(yè)面之間的切換。
我們先來(lái)看個(gè)我們要實(shí)現(xiàn)的底部導(dǎo)航欄的效果圖：（三個(gè)導(dǎo)航圖標(biāo)示例，微信小程序最多能加5個(gè)）
阿里圖標(biāo)庫(kù) http://www.iconfont.cn/collections/show/29
在這個(gè)網(wǎng)站上下載一些自己要用到的圖標(biāo)，比如人員頭像，home主頁(yè)等一些常用的圖標(biāo)，直接點(diǎn)擊下載保存到本地，修改一下命名。也可以使用UI準(zhǔn)備好的圖標(biāo)。
回到項(xiàng)目里，新建一個(gè)images文件夾，將剛剛下載好的圖標(biāo)放在文件夾底下備用，將上述起好名字的圖標(biāo) 保存到 小程序 項(xiàng)目目錄中 新創(chuàng)建的 images 文件夾中，準(zhǔn)備工作就做好了。
我們找到項(xiàng)目根目錄中的配置文件 app.json 加入如下配置信息（app.json文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。）
重慶分公司
重慶分公司
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/1.png",
"iconPath": "images/2.png",
"pagePath": "pages/index/index",
"text": "首頁(yè)"
},
{
"selectedIconPath": "images/1.png",
"iconPath": "images/2.png",
"pagePath": "pages/logs/logs",
"text": "日志"
},
{
"selectedIconPath": "images/1.png",
"iconPath": "images/2.png",
"pagePath": "pages/test/test",
"text": "測(cè)試"
}
]
}
以上只是基礎(chǔ)的部分，當(dāng)然了小程序的官方文檔提供了更多的豐富的組件和樣式
參考文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
OK，結(jié)束，保存 編譯 就可以實(shí)現(xiàn)小程序的經(jīng)典的底部導(dǎo)航效果了
==============
附錄：一份完整代碼（可忽略不計(jì)）
{
"pages":[
"pages/index/index",
"pages/category/category",
"pages/topic/topic",
"pages/user/user",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "WeiCMS",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#8c8c8c",
"selectedColor": "#f4645f",
"backgroundColor": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
"iconPath":"images/48.png",
"selectedIconPath":"images/48.png"
},
{
"pagePath": "pages/category/category",
"text": "分類",
"iconPath":"images/48.png",
"selectedIconPath":"images/48.png"
},
{
"pagePath": "pages/topic/topic",
"text": "話題",
"iconPath":"images/48.png",
"selectedIconPath":"images/48.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath":"images/48.png",
"selectedIconPath":"images/48.png"
}
],
"position": "bottom"
}
}感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中底部導(dǎo)航欄怎么實(shí)現(xiàn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
