微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實現(xiàn)
更新時間：2018年10月17日 11:08:43 作者：國蘇
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前期準(zhǔ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"
}
}
說明
字段都比較簡單就不詳細(xì)說了 其中 “iconPath”: “./res/icon_tab_me.png”是圖片的路徑
自己在項目里創(chuàng)建一個res文件夾，然后放入需要的圖片
tab 好看一點了吧
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
關(guān)于瀏覽器退格鍵的禁用，可行的方法有很多，在本文將為大家詳細(xì)介紹下在js中時如何做到的，有需求的各位可以參考下2013-10-10
flv.js是一款優(yōu)秀的開源web端flv文件播放器，flv格式目前廣泛應(yīng)用在直播及音視頻錄制領(lǐng)域，本文就詳細(xì)的介紹一下flv.js的具體使用教程，感興趣的可以了解一下2023-05-05
jsMind是一個顯示/編輯思維導(dǎo)圖的純的javascript類庫,其基于HTML5的帆布進(jìn)行設(shè)計.jsMind以BSD協(xié)議開源,這篇文章主要給大家介紹了關(guān)于思維導(dǎo)圖插件jsMind的詳細(xì)使用指南,需要的朋友可以參考下2024-07-07
javascript實現(xiàn)仿百度圖片的瀑布流加載效果
這是一款仿照百度圖片的瀑布流效果，可以無限加載,兼容各大主流瀏覽器，這里分享給大家，希望小伙伴們能夠喜歡2016-04-04
javascript驗證內(nèi)容為數(shù)字以及長度為10的簡單實例
下面小編就為大家?guī)硪黄猨avascript驗證內(nèi)容為數(shù)字以及長度為10的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript引用類型Function,結(jié)合實例形式詳細(xì)分析了javascript引用類型Function概念、定義、原理、相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2018-08-08
瀏覽器對象模型(BOM)是瀏覽器提供的JavaScript操作瀏覽器的API,提供了與網(wǎng)頁無關(guān)的瀏覽器功能對象,這篇文章主要給大家介紹了關(guān)于前端BOM操作常用命令詳解及代碼案例的相關(guān)資料,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實例代碼分析的相關(guān)資料,需要的朋友可以參考下2017-01-01
淺析js設(shè)置控件的readonly與enabled屬性問題
本篇文章是對js設(shè)置控件的readonly與enabled屬性問題進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12