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

更新時(shí)間：2018年10月17日 11:08:43 作者：國蘇

這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

1.瀏覽一遍簡易教程，下載相應(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"
 }
}

說明

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

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

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript變量類型以及變量作用域詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JS禁用瀏覽器退格鍵實(shí)現(xiàn)思路及代碼
關(guān)于瀏覽器退格鍵的禁用，可行的方法有很多，在本文將為大家詳細(xì)介紹下在js中時(shí)如何做到的，有需求的各位可以參考下
2013-10-10
flv.js的具體使用教程
flv.js是一款優(yōu)秀的開源web端flv文件播放器，flv格式目前廣泛應(yīng)用在直播及音視頻錄制領(lǐng)域，本文就詳細(xì)的介紹一下flv.js的具體使用教程，感興趣的可以了解一下
2023-05-05
思維導(dǎo)圖插件jsMind的詳細(xì)使用指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純的javascript類庫,其基于HTML5的帆布進(jìn)行設(shè)計(jì).jsMind以BSD協(xié)議開源,這篇文章主要給大家介紹了關(guān)于思維導(dǎo)圖插件jsMind的詳細(xì)使用指南,需要的朋友可以參考下
2024-07-07
javascript實(shí)現(xiàn)仿百度圖片的瀑布流加載效果
這是一款仿照百度圖片的瀑布流效果，可以無限加載,兼容各大主流瀏覽器，這里分享給大家，希望小伙伴們能夠喜歡
2016-04-04
javascript驗(yàn)證內(nèi)容為數(shù)字以及長度為10的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript驗(yàn)證內(nèi)容為數(shù)字以及長度為10的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript引用類型Function實(shí)例詳解
這篇文章主要介紹了JavaScript引用類型Function,結(jié)合實(shí)例形式詳細(xì)分析了javascript引用類型Function概念、定義、原理、相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08
前端BOM操作常用命令詳解及代碼案例
瀏覽器對(duì)象模型(BOM)是瀏覽器提供的JavaScript操作瀏覽器的API,提供了與網(wǎng)頁無關(guān)的瀏覽器功能對(duì)象,這篇文章主要給大家介紹了關(guān)于前端BOM操作常用命令詳解及代碼案例的相關(guān)資料,需要的朋友可以參考下
2024-10-10
JSON 數(shù)據(jù)詳解及實(shí)例代碼分析
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實(shí)例代碼分析的相關(guān)資料,需要的朋友可以參考下
2017-01-01
淺析js設(shè)置控件的readonly與enabled屬性問題
本篇文章是對(duì)js設(shè)置控件的readonly與enabled屬性問題進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12