微信小程序开发之tabbar图标和颜色的实现

{ "pages":[ "pages/fightings/home", "pages/publish/home", "pages/mine/home" ], "tabBar": { "list": [ { "pagePath": "pages/fightings/home", "text": "挑战" }, { "pagePath": "pages/publish/home", "text": "发布" }, { "pagePath": "pages/mine/home", "text": "我" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "i挑战", "navigationBarTextStyle":"black" } }

说明

pages就是我们有多少个页面

tabbar是页面底部的tab

window是页面的一些属性

这个样子太丑了 我们先来美化一下这个tab

{ "pages":[ "pages/home/home", "pages/fightings/home", "pages/mine/home" ], "tabBar": { "color":"#666666", "selectedColor":"#f10b2e", "list": [ { "pagePath": "pages/home/home", "text": "大厅", "iconPath": "./res/icon_tab_home.png", "selectedIconPath": "./res/icon_tab_home_hl.png" }, { "pagePath": "pages/fightings/home", "text": "挑战", "iconPath":"./res/icon_tab_fighting.png", "selectedIconPath":"./res/icon_tab_fighting_hl.png" }, { "pagePath": "pages/mine/home", "text": "我", "iconPath": "./res/icon_tab_me.png", "selectedIconPath": "./res/icon_tab_me_hl.png" } ] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "i挑战", "navigationBarTextStyle":"black" } }

说明

字段都比较简单就不详细说了 其中 “iconPath”: “./res/icon_tab_me.png”是图片的路径

自己在项目里创建一个res文件夹，然后放入需要的图片

tab 好看一点了吧