上一章節,我們分享了如何創建一個新的頁面和設置頁面的標題,這一章我們來聊聊底部導航欄是如何實現的。即點擊底部的導航,會實現不同對應頁面之間的切換。
我們先來看個我們要實現的底部導航欄的效果圖:(三個導航圖標示例,微信小程序最多能加5個)
1. 圖標準備
阿里圖標庫 http://www.iconfont.cn/collections/show/29
在這個網站上下載一些自己要用到的圖標,比如人員頭像,home主頁等一些常用的圖標,直接點擊下載保存到本地,修改一下命名。也可以使用UI準備好的圖標。
回到項目里,新建一個images文件夾,將剛剛下載好的圖標放在文件夾底下備用,將上述起好名字的圖標 保存到 小程序 項目目錄中 新創建的 images 文件夾中,準備工作就做好了。
2. 添加配置文件
我們找到項目根目錄中的配置文件 app.json 加入如下配置信息(app.json文件用來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 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": "測試"
}
]
}
以上只是基礎的部分,當然了小程序的官方文檔提供了更多的豐富的組件和樣式
參考文檔:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
OK,結束,保存 編譯 就可以實現小程序的經典的底部導航效果了
github:https://github.com/wangxiaoting666/myproject
==============
附錄:一份完整代碼(可忽略不計)
{
"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"
}
}
下一章:微信小程序從零開始開發步驟(四)微信小程序頁面自定義分享onShareAppMessage
文末福利:
福利一:前端,Java,產品經理,微信小程序,Python等資源合集大放送:http://www.lxweimin.com/p/e8197d4d9880
福利二:微信小程序入門與實戰全套詳細視頻教程
閱讀鏈接:
微信小程序從零開始開發步驟(一)搭建開發環境http://www.lxweimin.com/p/0ff8c3b2f59f
微信小程序從零開始開發步驟(二)創建小程序頁面http://www.lxweimin.com/p/fe0db14e2869
微信小程序從零開始開發步驟(三)底部導航欄http://www.lxweimin.com/p/89a63dc99839
微信小程序從零開始開發步驟(四)自定義分享的功能http://www.lxweimin.com/p/65d9bdb8051d
微信小程序從零開始開發步驟(五)輪播圖http://www.lxweimin.com/p/bc3261557031
微信小程序從零開始開發步驟(六)4種頁面跳轉的方法http://www.lxweimin.com/p/01a5a6a0fdb9
微信小程序從零開始開發步驟(七)引入外部js 文件http://www.lxweimin.com/p/5f2cde64d7f2
微信小程序從零開始開發步驟(八)引入框架WeUI:http://www.lxweimin.com/p/fd423b6e17be