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

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

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

前期準備：注冊，填材料，驗證等等：https://mp.weixin.qq.com

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

寫一個小例子

點擊左側(cè)的 “編輯”-》點擊右側(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就是我們有多少個頁面
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": "挑戰(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"
 }
}

說明

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

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

tab 好看一點了吧

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

您可能感興趣的文章:

相關(guān)文章

JS封裝的自動創(chuàng)建表格的實現(xiàn)代碼
這篇文章主要介紹了JS封裝的自動創(chuàng)建表格的實現(xiàn)代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細，對我們學(xué)習(xí)JS有一定幫助，需要的可以參考一下
2022-08-08
javascript 簡單抽屜效果的實現(xiàn)代碼
javascript 簡單抽屜效果的實現(xiàn)代碼，需要的朋友可以參考下，大家自行測試。
2010-03-03
完美兼容各大瀏覽器獲取HTTP_REFERER方法總結(jié)
發(fā)現(xiàn)一個關(guān)于瀏覽器兼容的問題，當用JS 執(zhí)行代碼 window.location.href=”http://www.dhdzp.com” 來進行跳轉(zhuǎn)的時候，F(xiàn)irefox 可以獲取到到HTTP_REFERER頁面，但是在IE中這一項為空
2014-06-06
去除圖像或鏈接黑眼圈的兩種方法總結(jié)
去除圖像或鏈接黑眼圈的兩種方法總結(jié)...
2007-06-06
JsRender實用入門教程
這篇文章主要介紹了JsRender實用入門實例,包含了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點,并提供了完整的實例下載,非常具有實用價值,需要的朋友可以參考下
2014-10-10
Nest.js快速啟動API項目過程詳解
這篇文章主要為大家介紹了Nest.js快速啟動API項目過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
JavaScript的事件機制詳解
事件是將JavaScript腳本與網(wǎng)頁聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細探討JavaScript的事件機制，并對比分析了瀏覽器之間的不同，具體內(nèi)容包括事件流、事件處理程序綁定方式、事件對象等。
2017-01-01
JavaScript中判斷整數(shù)的多種方法總結(jié)
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下
2014-11-11
JS加密插件CryptoJS實現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的Base64加密,結(jié)合實例形式分析了CryptoJS進行base64加密的簡單實現(xiàn)技巧,需要的朋友可以參考下
2018-08-08