在小程序開發中，tab bar 是實現多頁面快速切換的關鍵組件，能極大提升用戶體驗。上一篇我們完成了基礎配置，今天深入探索，打造更豐富實用的 tab bar 效果。
實現目標
這次要在小程序底部創建包含 “首頁”“消息”“聯系我們” 三項的?tab bar，點擊不同選項可切換對應頁面，且選中時顯示特定圖標。
實現步驟
1. 準備圖標資源
首先，將資料目錄中的image文件夾拷貝到小程序項目根目錄。image文件夾里有tab文件夾，存放著 6 個圖標，分成 3 組，每組兩個。名字含-active的是選中后的圖標，不含的是默認圖標。比如home.png是 “首頁” 未選中圖標，home-active.png是選中圖標。這一步就像搭建房子準備好建筑材料，為后續設置圖標效果做準備。
2. 新建 tab bar 頁面
通過app.json文件配置節點新建頁面。在app.json的頁面路徑配置數組里，按順序添加/pages/home/home、/pages/message/message、/pages/contact/contact這三個頁面路徑，分別對應 “首頁”“消息”“聯系我們” 頁面。注意，tab 頁簽對應的頁面必須放在數組開頭，否則無法正常渲染。這就好比排隊，tab 頁簽頁面得站在隊伍最前面。
3. 配置 tab bar 選項
- 打開配置文件：找到并打開app.json配置文件。
- 添加 tab bar 節點：在與window節點同級位置，新增tabBar節點。在微信開發者工具里，輸入tabBar回車，會自動生成基本結構，方便后續改造。
- 配置 list 數組：在tabBar節點內添加list數組，存放每個 tab 頁簽的配置對象。每個對象包含 4 個屬性：pagePath（頁面路徑）、text（顯示文本）、iconPath（未選中圖標路徑）、selectedIconPath（選中圖標路徑），前兩項必填，后兩項可選，為美觀一般都設置。以 “首頁” 為例，配置代碼如下：
{"tabBar": {"list": [{"pagePath": "/pages/home/home","text": "首頁","iconPath": "/image/tab/home.png","selectedIconPath": "/image/tab/home-active.png"},// 其他頁簽配置類似]}
}按照上述格式，依次完成 “消息” 和 “聯系我們” 頁簽的配置，修改相應的頁面路徑、顯示文本和圖標路徑。
效果驗證
完成配置保存后，在微信開發者工具模擬器里查看效果。若一切正常，底部會出現包含三個選項的 tab bar，默認選中 “首頁”，點擊不同選項可切換頁面，同時圖標也會相應變化。若出現問題，仔細檢查配置步驟，如頁面路徑是否正確、圖標路徑是否準確、文件是否成功拷貝等。
總結與注意事項
- 頁面順序：tab 頁簽對應的頁面一定要放在配置數組開頭，否則無法顯示。
- 圖標路徑：確保圖標路徑準確，包括文件夾名稱和文件名，區分大小寫。
- 必填屬性：
pagePath和text是每個頁簽配置對象的必填屬性，不可遺漏。
