微信小程序開發之tabbar圖標和顏色的實現

 更新時間:2018年10月17日 11:08:43   作者:國蘇   我要評論

這篇文章主要介紹了微信小程序開發之tabbar圖標和顏色的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

前期準備 :注冊,填材料,驗證等等: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是頁面的一些屬性

這個樣子太丑了 我們先來美化一下這個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 好看一點了吧

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

辽宁35选7开奖结果