微信小程序tabBar設(shè)置實(shí)例解析
更新時(shí)間：2019年11月14日 11:24:22 作者：小魚吃貓
這篇文章主要介紹了微信小程序tabBar設(shè)置實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序tabBar設(shè)置實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
我們先來看一份圖，這個(gè)設(shè)置在官方文檔中已經(jīng)寫得很清楚了，我只是做一個(gè)總結(jié)
注：我寫注釋是為了方便說明，在小程序中的json文件中是不能用注釋的
這個(gè)tabBar屬于全局屬性，因此就在全局配置文件app.json中配置
1.tabBar的配置
"color": "#8a8a8a",
"selectedColor": "#f40",//選中的顏色
"backgroundColor": "#ffffff",//背景色
"borderStyle": "black",//邊界線的顏色
"position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會(huì)顯示圖標(biāo)
"list": [//組件的清單
{
"pagePath": "page/component/index",//頁面路徑
"text": "組件",//組件上顯示的文字
"iconPath": "img/compont_un.png",//默認(rèn)圖標(biāo)
"selectedIconPath": "img/compont_on.png"http://選中后的圖標(biāo)
},
{
"pagePath": "page/API/index",
"text": "API",
"iconPath": "img/API_un.png",
"selectedIconPath": "img/API_on.png"
},
{
"pagePath": "page/persion/index",
"text": "我的",
"iconPath": "img/我的_un.png",
"selectedIconPath": "img/我的_on.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "img/日志.png",
"selectedIconPath": "img/日志_on.png"
}
]
},
最后再加一張圖，如果你設(shè)置了在頂部顯示，效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)導(dǎo)入和導(dǎo)出Excel的示例詳解
在現(xiàn)代的Web應(yīng)用開發(fā)中,與Excel文件的導(dǎo)入和導(dǎo)出成為了一項(xiàng)常見而重要的任務(wù),本文主要介紹了如何在熟悉的電子表格?UI?中輕松導(dǎo)入?Excel?文件,需要的可以參考下2024-03-03
本篇文章主要講述幾種前端JS檢測(cè)開發(fā)者工具是否打開的方法,需要的朋友可以參考下2020-10-10
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JS中FRAME的操作問題實(shí)例分析,詳細(xì)講述了js針對(duì)frame框架操作中的各種訪問問題,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了xmlhttp緩存清除的2種解決方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
js前端存儲(chǔ)之sessionStorage使用方法舉例
sessionStorage是指本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀,這篇文章主要給大家介紹了關(guān)于js前端存儲(chǔ)之sessionStorage使用方法的相關(guān)資料,需要的朋友可以參考下2024-06-06
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）2013-01-01
這篇文章主要介紹了JS如何輸出26個(gè)英文字符問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日示例分析
這篇文章主要介紹了JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日,結(jié)合具體實(shí)例形式分析了javascript針對(duì)日期時(shí)間的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05