微信小程序開發之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,圖標