微信小程序（uniapp）自定義 TabBar 實現指南

在微信小程序開發中，TabBar 是底部導航欄的重要組件，但官方提供的 TabBar 樣式和功能較為基礎，無法滿足所有項目的需求。本文將詳細介紹如何在 uniapp 中實現自定義 TabBar，并提供完整的實現思路和代碼示例。

---

一、自定義 TabBar 的實現思路

1. 隱藏原生 TabBar
   在 pages.json 文件中，將 tabBar 配置項設置為空或移除，從而隱藏原生 TabBar。

2. 創建自定義 TabBar 組件
   在項目中創建一個全局組件，用于渲染自定義的 TabBar。

3. 動態切換頁面內容
   使用 uni.switchTab 或 uni.navigateTo 方法切換頁面，同時控制 TabBar 的選中狀態。

4. 全局管理 TabBar 狀態
   通過 Vuex 或全局變量管理當前選中的 TabBar 項，確保狀態同步。

---

二、實現步驟

1. 隱藏原生 TabBar

在 pages.json 文件中，移除或注釋掉 tabBar 配置：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}},{"path": "pages/mine/mine","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#FFFFFF","backgroundColor": "#FFFFFF"},// "tabBar": {}

2. 創建自定義 TabBar 組件

在 components 目錄下創建 CustomTabBar.vue 文件：

<template><view class="tab-bar"><viewv-for="(item, index) in tabList":key="index"class="tab-item":class="{ active: currentTab === index }"@click="switchTab(index, item.path)"><image :src="currentTab === index ? item.iconActive : item.icon" class="tab-icon" /><text>{{ item.text }}</text></view></view>
</template>

export default {data() {return {currentTab: 0,tabList: [{ text: "首頁", path: "/pages/index/index", icon: "/static/home.png", iconActive: "/static/home-active.png" },{ text: "我的", path: "/pages/mine/mine", icon: "/static/mine.png", iconActive: "/static/mine-active.png" }]};},methods: {switchTab(index, path) {this.currentTab = index;uni.switchTab({ url: path });}}
};

.tab-bar {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: #ffffff;display: flex;justify-content: space-around;align-items: center;border-top: 1px solid #eaeaea;
}
.tab-item {text-align: center;flex: 1;
}
.tab-item.active {color: #007aff;
}
.tab-icon {width: 24px;height: 24px;
}

完整代碼：

<template><view class="tab-bar"><viewv-for="(item, index) in tabList":key="index"class="tab-item":class="{ active: currentTab === index }"@click="switchTab(index, item.path)"><image :src="currentTab === index ? item.iconActive : item.icon" class="tab-icon" /><text>{{ item.text }}</text></view></view>
</template><script>
export default {data() {return {currentTab: 0,tabList: [{ text: "首頁", path: "/pages/index/index", icon: "/static/home.png", iconActive: "/static/home-active.png" },{ text: "我的", path: "/pages/mine/mine", icon: "/static/mine.png", iconActive: "/static/mine-active.png" }]};},methods: {switchTab(index, path) {this.currentTab = index;uni.switchTab({ url: path });}}
};
</script><style>
.tab-bar {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: #ffffff;display: flex;justify-content: space-around;align-items: center;border-top: 1px solid #eaeaea;
}
.tab-item {text-align: center;flex: 1;
}
.tab-item.active {color: #007aff;
}
.tab-icon {width: 24px;height: 24px;
}
</style>

3. 在頁面中引入自定義 TabBar

在需要顯示 TabBar 的頁面中，引入并使用該組件。例如，在 pages/index/index.vue 中：

<template><view class="page"><view class="content"><!-- 頁面內容 --></view><custom-tab-bar /></view>
</template><script>
import CustomTabBar from "@/components/CustomTabBar.vue";export default {components: {CustomTabBar}
};
</script><style>
.page {padding-bottom: 50px; /* 留出 TabBar 的空間 */
}
.content {/* 頁面內容樣式 */
}
</style>

4. 全局狀態管理（可選）

如果項目中有多個頁面需要共享 TabBar 的選中狀態，可以使用 Vuex 或全局變量來管理 currentTab。

三、注意事項

1. 頁面高度調整
   由于自定義 TabBar 是固定在頁面底部的，因此需要在頁面內容中留出足夠的空間，避免內容被 遮擋。
2. 圖標資源路徑
   確保圖標資源的路徑正確，并且支持不同分辨率的設備。
3. 性能優化
   自定義 TabBar 組件會在每個頁面中重復渲染，建議將組件邏輯封裝為通用組件，減少重復代碼。
4. 兼容性
   自定義 TabBar 的實現方式在小程序和 H5 環境中均可使用，但需要注意不同平臺的樣式差異。

四、總結

通過隱藏原生 TabBar 并使用自定義組件，開發者可以靈活實現符合項目需求的 TabBar 樣式和功能。同時，通過全局狀態管理和樣式優化，可以進一步提升項目的可維護性和用戶體驗。