微信小程式全域性設定之tabBar實戰案例

2022-08-06 18:00:26

全域性設定 - tabBar

1. 什麼是 tabBar

tabBar 是行動端應用常見的頁面效果，用於實現多頁面的快速切換。

小程式中通常將其分為：

底部 tabBar
頂部 tabBar

注意： tabBar中只能設定最少 2 個、最多 5 個 tab 頁籤當渲染頂部 tabBar 時，不顯示 icon，只顯示文字

2. tabBar 的 6 個組成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：選中時的圖片路徑

③ borderStyle：tabBar 上邊框的顏色

④ iconPath：未選中時的圖片路徑

⑤ selectedColor：tab 上的文字選中時的顏色

⑥ color：tab 上文字的預設（未選中）顏色

3. tabBar 節點的設定項

屬性	型別	必填	預設值	描述
position	String	否	bottom	tabBar 的位置，僅支援 bottom/top
borderStyle	String	否	black	tabBar 上邊框的顏色，僅支援 black/white
color	HexColor	否		tab 上文字的預設（未選中）顏色
selectedColor	HexColor	否		tab 上的文字選中時的顏色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 頁籤的列表，最少 2 個、最多 5 個 tab

4. 每個 tab 項的設定選項

屬性	型別	必填	描述
pagePath	String	是	頁面路徑，頁面必須在 pages 中預先定義
text	String	是	tab 上顯示的文字
iconPath	String	否	未選中時的圖示路徑；當 postion 為 top 時，不顯示 icon
selectedIconPath	String	否	選中時的圖示路徑；當 postion 為 top 時，不顯示 icon

全域性設定 - 案例：設定 tabBar

1. 需求描述

根據素材中提供的小圖示、在小程式中設定如圖所示的 tabBar 效果：

素材：

2. 實現步驟

① 拷貝圖示資源

② 新建 3 個對應的 tab 頁面

③ 設定 tabBar 選項

3. 步驟1 - 拷貝圖示資源

① 把資料目錄中的 images 資料夾，拷貝到小程式專案根目錄中

② 將需要用到的小圖示分為 3 組，每組兩個，其中：

圖片名稱中包含 -active 的是選中之後的圖示

圖片名稱中不包含 -active 的是預設圖示

截圖如下：

4.步驟2 - 新建 3 個對應的 tab 頁面

通過 app.json 檔案的 pages 節點，快速新建 3 個對應的 tab 頁面，範例程式碼如下：

其中，home 是首頁，message 是訊息頁面，contact 是聯絡我們頁面。

5. 步驟3 - 設定 tabBar 選項

① 開啟 app.json 組態檔，和 pages、window 平級，新增 tabBar 節點

② tabBar 節點中，新增 list 陣列，這個陣列中存放的，是每個 tab 項的設定物件

③ 在 list 陣列中，新增每一個 tab 項的設定物件。物件中包含的屬性如下：

pagePath 指定當前 tab 對應的頁面路徑【必填】
text 指定當前 tab 上按鈕的文字【必填】
iconPath 指定當前 tab 未選中時候的圖片路徑【可選】
selectedIconPath 指定當前 tab 被選中後高亮的圖片路徑【可選】

6. 完整的設定程式碼

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f12321",
    "navigationBarTitleText": "測試",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首頁",
        "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": "聯絡我們",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}