微信小程序全局配置之tabBar實(shí)例分析

這篇文章主要介紹“微信小程序全局配置之tabBar實(shí)例分析”，在日常操作中，相信很多人在微信小程序全局配置之tabBar實(shí)例分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”微信小程序全局配置之tabBar實(shí)例分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

全局配置 - tabBar

1. 什么是 tabBar

tabBar 是移動(dòng)端應(yīng)用常見(jiàn)的頁(yè)面效果， 用于實(shí)現(xiàn)多頁(yè)面 的快速切換 。

小程序中通常將其分為：

• 底部 tabBar

• 頂部 tabBar

注意： tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁(yè)簽 當(dāng)渲染頂部 tabBar 時(shí)，不顯示 icon，只顯示文本

2. tabBar 的 6 個(gè)組成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：選中時(shí)的圖片路徑

③ borderStyle：tabBar 上邊框的顏色

④ iconPath：未選中時(shí)的圖片路徑

⑤ selectedColor：tab 上的文字選中時(shí)的顏色

⑥ color：tab 上文字的默認(rèn)（未選中）顏色

3. tabBar 節(jié)點(diǎn)的配置項(xiàng)

4. 每個(gè) tab 項(xiàng)的配置選項(xiàng)

全局配置 - 案例：配置 tabBar

1. 需求描述

根據(jù)素材中提供的小圖標(biāo)、 在小程序中配置如圖所示的 tabBar 效果：

素材：  

2. 實(shí)現(xiàn)步驟

① 拷貝圖標(biāo)資源

② 新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面

③ 配置 tabBar 選項(xiàng)

3. 步驟1 - 拷貝圖標(biāo)資源

① 把資料目錄中的 images 文件夾， 拷貝到小程序項(xiàng)目根目錄中

② 將需要用到的小圖標(biāo)分為 3 組，每組兩個(gè)，其中：

圖片名稱中 包含 -active 的是選中之后 的圖標(biāo)

圖片名稱中 不包含 -active 的是 默認(rèn)圖標(biāo)

截圖如下：

4.步驟2 - 新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面

通過(guò) app.json 文件的 pages 節(jié)點(diǎn)，快速新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面，示例代碼如下：

其中，home 是首頁(yè)，message 是消息頁(yè)面，contact 是聯(lián)系我們頁(yè)面。

5. 步驟3 - 配置 tabBar 選項(xiàng)

① 打開(kāi) app.json 配置文件，和 pages、window 平級(jí)，新增 tabBar 節(jié)點(diǎn)

② tabBar 節(jié)點(diǎn)中，新增 list 數(shù)組 ，這個(gè)數(shù)組中存放的，是每個(gè) tab 項(xiàng)的配置對(duì)象

③ 在 list 數(shù)組中， 新增每一個(gè) tab 項(xiàng)的配置對(duì)象 。對(duì)象中包含的屬性如下：

• pagePath 指定當(dāng)前 tab 對(duì)應(yīng)的頁(yè)面路徑 【 必填 】

• text 指定當(dāng)前 tab 上按鈕的文字【 必填 】

• iconPath 指定當(dāng)前 tab 未選中時(shí)候的圖片路徑【可選】

• selectedIconPath 指定當(dāng)前 tab 被選中后高亮的圖片路徑【可選】

6. 完整的配置代碼

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f12321",
    "navigationBarTitleText": "測(cè)試",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首頁(yè)",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "聯(lián)系我們",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

到此，關(guān)于“微信小程序全局配置之tabBar實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！