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

更新時(shí)間：2017年08月16日 11:19:36 作者：Rolan

這篇文章主要為大家詳細(xì)介紹了微信小程序tabBar底部導(dǎo)航中文注解api，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

小程序tabBar配置代碼注解

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

  //tabBar注意是B是大寫，有朋友提問(wèn)運(yùn)行時(shí)tab沒(méi)出現(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"
      }]
  }
}

小程序tabBar參數(shù)說(shuō)明

如果我們的小程序是一個(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ō)明：

其中 list 接受一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如下：

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

您可能感興趣的文章:

相關(guān)文章

JS二維數(shù)組的定義說(shuō)明
本篇文章主要是對(duì)JS二維數(shù)組的定義進(jìn)行了說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
你需要知道的TypeScript高級(jí)類型總結(jié)
在開發(fā)過(guò)程中，為了應(yīng)對(duì)多變的復(fù)雜場(chǎng)景，我們需要了解一下?TypeScript?的高級(jí)類型。本文就為大家整理了一些需要掌握的TypeScript高級(jí)類型，需要的可以參考一下
2022-08-08
ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼
這篇文章主要介紹了ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
JavaScript防抖與節(jié)流超詳細(xì)全面講解
在開發(fā)中我們經(jīng)常會(huì)遇到一些高頻操作，比如：鼠標(biāo)移動(dòng)，滑動(dòng)窗口，鍵盤輸入等等，節(jié)流和防抖就是對(duì)此類事件進(jìn)行優(yōu)化，降低觸發(fā)的頻率，以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個(gè)讓面試官拍大腿的防抖節(jié)流函數(shù)，需要的可以參考一下
2022-10-10
bootstrap表格分頁(yè)實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了bootstrap表格分頁(yè)實(shí)例講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript實(shí)現(xiàn)防止網(wǎng)頁(yè)被嵌入Frame框架的代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)防止網(wǎng)頁(yè)被嵌入Frame框架的代碼分享,本文給出了2種防嵌入方法,需要的朋友可以參考下
2014-12-12
JavaScript繪制游戲地圖并且操控人物移動(dòng)
JavaScript開發(fā)小游戲,目標(biāo)是使用JavaScript繪制簡(jiǎn)單的二維地圖,采用二維數(shù)組存儲(chǔ)地圖信息,使用表格繪制地圖,每個(gè)td單元格存儲(chǔ)數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時(shí)人物做出相應(yīng)操作,人物下一步碰撞到障礙物,終止人物運(yùn)動(dòng)
2023-10-10
JS使用window.requestAnimationFrame()對(duì)列表切片進(jìn)行渲染
這篇文章主要為大家介紹了JS使用requestAnimationFrame對(duì)列表切片進(jìn)行渲染，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JavaScript深拷貝和淺拷貝概念與用法實(shí)例分析
這篇文章主要介紹了JavaScript深拷貝和淺拷貝概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript深拷貝與淺拷貝的概念、原理、用法及相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問(wèn)題解決
本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-09-09