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

2020-03-21 16:09:41

字体：大中小

来源：转载

供稿：网友

前期准备：注册，填材料，验证等等：https://mp.weixin.qq.com

1.浏览一遍简易教程，下载相应的开发工具

写一个小例子

点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为

{ "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是页面的一些属性

微信小程序开发,小程序开发,tabbar,图标

这个样子太丑了我们先来美化一下这个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 好看一点了吧

微信小程序开发,小程序开发,tabbar,图标