微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)

2019-11-19 12:41:15

字體：大中小

供稿：網(wǎng)友

前期準(zhǔn)備：注冊(cè)，填材料，驗(yàn)證等等：https://mp.weixin.qq.com

1.瀏覽一遍簡(jiǎn)易教程，下載相應(yīng)的開發(fā)工具

寫一個(gè)小例子

點(diǎn)擊左側(cè)的 “編輯”-》點(diǎn)擊右側(cè)代碼里的 app.json 修改為

{ "pages":[  "pages/fightings/home",   "pages/publish/home",   "pages/mine/home" ], "tabBar": {  "list": [   {    "pagePath": "pages/fightings/home",    "text": "挑戰(zhàn)"   },   {    "pagePath": "pages/publish/home",    "text": "發(fā)布"   },   {    "pagePath": "pages/mine/home",    "text": "我"   }  ] }, "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "i挑戰(zhàn)",  "navigationBarTextStyle":"black" }}

說明

pages就是我們有多少個(gè)頁面
tabbar是頁面底部的tab
window是頁面的一些屬性

這個(gè)樣子太丑了我們先來美化一下這個(gè)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": "挑戰(zhàn)",    "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挑戰(zhàn)",  "navigationBarTextStyle":"black" }}

說明

字段都比較簡(jiǎn)單就不詳細(xì)說了其中 “iconPath”: “./res/icon_tab_me.png”是圖片的路徑

自己在項(xiàng)目里創(chuàng)建一個(gè)res文件夾，然后放入需要的圖片

tab 好看一點(diǎn)了吧