微信小程序tabBar底部導(dǎo)航中文注解api詳解
微信小程序tabBar底部導(dǎo)航中文注解api,信小程序tabBar就是app底部的那個導(dǎo)航欄,可以放1-5導(dǎo)航鏈接,這里對微信小程序底部導(dǎo)航tabbar的中文解釋。
微信小程序tabBar是在全局app.json文件里面配置的。
小程序tabBar配置代碼注解
{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"navigationBarTitleText": "TabBar",
"navigationBarBackgroundColor": "#F60",
"navigationBarTextStyle": "white"
},
//tabBar注意是B是大寫,有朋友提問運(yùn)行時tab沒出現(xiàn),檢查是不是這里手誤
"tabBar":{
//文檔指出color是必填項,其實可為空,不重寫color就是深灰,樣式更統(tǒng)一
"color": "#ddd",
//同樣,文檔指出selectedColor是必填項,不過selectedColor有必要重寫,區(qū)分當(dāng)前項與普通項
"selectedColor": "#3cc51f",
//同樣,文檔指出color是必填項,其實可為空,不重寫backgroundColor就是淺灰,樣式更統(tǒng)一。
"backgroundColor": "#fff",
//borderStyle,不寫默認(rèn)就是黑,那就黑好了,white的話,會少一條分隔線,跟頁面混在一起了
"borderStyle":"black",
"list":[{
"pagePath":"pages/index/index",
//iconPath圖標(biāo)是非必填,只是tab欄會變矮,自然selectedIconPath也可不寫
"iconPath":"image/icon_API.png",
"selectedIconPath":"image/icon_API_HL.png",
"text":"index"
},{
"pagePath":"pages/detail/detail",
"iconPath":"image/icon_component.png",
"selectedIconPath":"image/icon_component_HL.png",
"text":"detail"
}]
}
}
小程序tabBar參數(shù)說明
如果我們的小程序是一個多 tab 應(yīng)用(客戶端窗口的底部有tab欄可以切換頁面),那么我們可以通過 tabBar 配置項指定 tab 欄的表現(xiàn),以及 tab 切換時顯示的對應(yīng)頁面。
tabBar 是一個數(shù)組,只能配置最少2個、最多5個 tab,tab 按數(shù)組的順序排序。
屬性說明:

其中 list 接受一個數(shù)組,數(shù)組中的每個項都是一個對象,其屬性值如下:


以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI table無縫循環(huán)滾動的示例代碼
這篇文章主要介紹了ElementUI table無縫循環(huán)滾動的示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
JavaScript防抖與節(jié)流超詳細(xì)全面講解
在開發(fā)中我們經(jīng)常會遇到一些高頻操作,比如:鼠標(biāo)移動,滑動窗口,鍵盤輸入等等,節(jié)流和防抖就是對此類事件進(jìn)行優(yōu)化,降低觸發(fā)的頻率,以達(dá)到提高性能的目的。本文就教大家如何實現(xiàn)一個讓面試官拍大腿的防抖節(jié)流函數(shù),需要的可以參考一下2022-10-10
JavaScript實現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享
這篇文章主要介紹了JavaScript實現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享,本文給出了2種防嵌入方法,需要的朋友可以參考下2014-12-12
JS使用window.requestAnimationFrame()對列表切片進(jìn)行渲染
這篇文章主要為大家介紹了JS使用requestAnimationFrame對列表切片進(jìn)行渲染,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決
本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09

