小程序模板網(wǎng)

微信小程序模板tabBar底部導(dǎo)航中文注解api

發(fā)布時(shí)間:2021-05-31 11:35 所屬欄目:小程序開發(fā)教程

微信小程序tabBar底部導(dǎo)航中文注解api,信小程序tabBar就是app底部的那個(gè)導(dǎo)航欄,可以放1-5導(dǎo)航鏈接,這里對(duì)微信小程序底部導(dǎo)航tabbar的中文解釋。

微信小程序tabBar是在全局app.json文件里面配置的。

小程序

{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"navigationBarTitleText": "TabBar",
"navigationBarBackgroundColor": "#F60",
"navigationBarTextStyle": "white"
},

//tabBar注意是B是大寫,有朋友提問(wèn)運(yùn)行時(shí)tab沒出現(xiàn),檢查是不是這里手誤
"tabBar":{

//文檔指出color是必填項(xiàng),其實(shí)可為空,不重寫color就是深灰,樣式更統(tǒng)一
"color": "#ddd",

//同樣,文檔指出selectedColor是必填項(xiàng),不過(guò)selectedColor有必要重寫,區(qū)分當(dāng)前項(xiàng)與普通項(xiàng)
"selectedColor": "#3cc51f",

//同樣,文檔指出color是必填項(xiàng),其實(shí)可為空,不重寫backgroundColor就是淺灰,樣式更統(tǒng)一。
"backgroundColor": "#fff",

//borderStyle,不寫默認(rèn)就是黑,那就黑好了,white的話,會(huì)少一條分隔線,跟頁(yè)面混在一起了
"borderStyle":"black",
"list":[{
"pagePath":"pages/index/index",

//iconPath圖標(biāo)是非必填,只是tab欄會(huì)變矮,自然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"
}]
}
}

小程序

  如果我們的小程序是一個(gè)多tab應(yīng)用(客戶端窗口的底部有tab欄可以切換頁(yè)面),那么我們可以通過(guò)tabBar配置項(xiàng)指定tab欄的表現(xiàn),以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

  tabBar是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè)tab,tab按數(shù)組的順序排序。

屬性說(shuō)明:

屬性 類型 必填 默認(rèn)值 描述
color HexColor   tab上的文字默認(rèn)顏色
selectedColor HexColor   tab上的文字選中時(shí)的顏色
backgroundColor HexColor   tab的背景色
borderStyle String black tabbar上邊框的顏色, 僅支持black/white
list Array   tab的列表,詳見list屬性說(shuō)明,最少2個(gè)、最多5個(gè)tab
position String bottom 可選值bottom、top

  其中l(wèi)ist接受一個(gè)數(shù)組,數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象,其屬性值如下:

屬性 類型 必填 說(shuō)明
pagePath String 頁(yè)面路徑,必須在pages中先定義
text String tab上按鈕文字
iconPath String 圖片路徑,icon大小限制為40kb
selectedIconPath String 選中時(shí)的圖片路徑,icon大小限制為40kb


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/25853.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢