上一章節(jié)，我們分享了如何創(chuàng)建一個新的頁面和設(shè)置頁面的標題，這一章我們來聊聊底部導航欄是如何實現(xiàn)的。即點擊底部的導航，會實現(xiàn)不同對應頁面之間的切換。

我們先來看個我們要實現(xiàn)的底部導航欄的效果圖：（三個導航圖標示例，微信小程序最多能加5個）

?

?

1. 圖標準備

阿里圖標庫 http://www.iconfont.cn/collections/show/29

在這個網(wǎng)站上下載一些自己要用到的圖標，比如人員頭像，home主頁等一些常用的圖標，直接點擊下載保存到本地，修改一下命名。也可以使用UI準備好的圖標。

?

回到項目里，新建一個images文件夾，將剛剛下載好的圖標放在文件夾底下備用，將上述起好名字的圖標 保存到 小程序 項目目錄中 新創(chuàng)建的 images 文件夾中，準備工作就做好了。

?

?

?

2. 添加配置文件

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息（app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡超時時間、設(shè)置多 tab 等。）

"tabBar": {"color": "#a9b7b7","selectedColor": "#11cd6e","borderStyle": "white","list": [{"selectedIconPath": "images/1.png","iconPath": "images/2.png","pagePath": "pages/index/index","text": "首頁"},{"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": "測試"}] }

?

以上只是基礎(chǔ)的部分，當然了小程序的官方文檔提供了更多的豐富的組件和樣式
參考文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK，結(jié)束，保存 編譯 就可以實現(xiàn)小程序的經(jīng)典的底部導航效果了

==============
附錄：一份完整代碼（可忽略不計）

?

?

{"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": "首頁","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"} }

下一章：微信小程序從零開始開發(fā)步驟（四）微信小程序頁面自定義分享onShareAppMessage

閱讀鏈接：
微信小程序從零開始開發(fā)步驟（一）搭建開發(fā)環(huán)境https://www.jianshu.com/p/0ff8c3b2f59f
微信小程序從零開始開發(fā)步驟（二）創(chuàng)建小程序頁面https://www.jianshu.com/p/fe0db14e2869
微信小程序從零開始開發(fā)步驟（三）底部導航欄https://www.jianshu.com/p/89a63dc99839
微信小程序從零開始開發(fā)步驟（四）自定義分享的功能https://www.jianshu.com/p/65d9bdb8051d
微信小程序從零開始開發(fā)步驟（五）輪播圖https://www.jianshu.com/p/bc3261557031
微信小程序從零開始開發(fā)步驟（六）4種頁面跳轉(zhuǎn)的方法https://www.jianshu.com/p/01a5a6a0fdb9
微信小程序從零開始開發(fā)步驟（七）引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2
微信小程序從零開始開發(fā)步驟（八）引入框架WeUI：https://www.jianshu.com/p/fd423b6e17be

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

總結(jié)

以上是生活随笔為你收集整理的微信小程序从零开始开发步骤（三）底部导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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