1. 簡介

在 Uniapp 開發中，自定義 Tabbar 是一個常見的需求。本教程將詳細介紹如何實現一個美觀且功能完整的自定義 Tabbar，并分享在實現過程中可能遇到的問題和解決方案。

2. 實現步驟

2.1 創建自定義 Tabbar 組件

首先，我們需要創建一個自定義的 Tabbar 組件。以下是完整的實現代碼：

<template><!-- 自定義 Tabbar 容器 --><view class="custom-tabbar"><!-- 遍歷 tabList 生成 Tabbar 項 --><view v-for="(item, index) in tabList" :key="index" class="tabbar-item" :class="{'tabbar-item-active': current === index}" @click="switchTab(item.pagePath)"><!-- 使用 Vant UI 的圖標組件 --><van-icon :name="current === index ? item.selectedIcon : item.icon" class="tabbar-icon" :class="{'tabbar-icon-active': current === index}" /><text>{{ item.text }}</text></view></view>
</template><script>
// 定義路由映射關系，用于快速查找當前頁面對應的索引
const TAB_ROUTES = {'/pages/index/index': 0,'/pages/detail/detail': 1,'/pages/course/course': 2,  '/pages/profile/profile': 3
};export default {data() {return {current: 0,  // 當前選中的 tab 索引tabList: [{pagePath: '/pages/index/index',text: '首頁',icon: 'home-o',selectedIcon: 'home-o'},{pagePath: '/pages/detail/detail',text: '詳情',icon: 'records',selectedIcon: 'records'},{pagePath: '/pages/course/course',  text: '課程',icon: 'clock-o',selectedIcon: 'clock-o'},{pagePath: '/pages/profile/profile',text: '我的',icon: 'contact',selectedIcon: 'contact'}]}},methods: {// 切換 tab 的方法switchTab(url) {uni.switchTab({ url });}},watch: {// 監聽路由變化，更新當前選中的 tab'$route.path': {immediate: true,handler(path) {this.current = TAB_ROUTES[path] || 0;}}}
}
</script><style>
/* Tabbar 容器樣式 */
.custom-tabbar {position: fixed;bottom: 0;left: 0;right: 0;height: 110rpx;display: flex;justify-content: space-around;align-items: center;background-color: #fff;border-top: 1rpx solid #e2e8f0;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);z-index: 9999;padding-bottom: env(safe-area-inset-bottom);  /* 適配全面屏 */
}/* Tabbar 項基礎樣式 */
.tabbar-item {display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 24rpx;color: #64748b;padding: 10rpx 0;transition: all 0.2s ease;position: relative;
}/* 激活狀態樣式 */
.tabbar-item-active {color: #3b82f6;font-weight: 600;
}/* 點擊效果 */
.tabbar-item:active {transform: scale(0.95);
}/* 圖標樣式 */
:deep(.tabbar-icon) {font-size: 48rpx !important;margin-bottom: 4rpx;
}/* 激活狀態圖標樣式 */
:deep(.tabbar-icon-active) {color: #3b82f6 !important;
}/* 文字樣式 */
.tabbar-item text {margin-top: 6rpx;font-weight: 500;
}/* 底部指示條 */
.tabbar-item-active:before {content: '';position: absolute;bottom: -10rpx;left: 50%;transform: translateX(-50%);width: 16rpx;height: 3px;background: #3b82f6;border-radius: 3px;
}
</style>

2.2 配置 pages.json

在 pages.json 中需要禁用原生 Tabbar，并配置頁面路由：

{"tabBar": {"custom": true,  // 啟用自定義 Tabbar"list": [{"pagePath": "pages/index/index","text": "首頁"},{"pagePath": "pages/detail/detail","text": "詳情"},{"pagePath": "pages/course/course",  "text": "課程"},{"pagePath": "pages/profile/profile","text": "我的"}]}
}

3.1 路由映射

使用 TAB_ROUTES 對象來映射路由路徑和對應的索引值，這樣可以方便地管理當前選中的 tab：

const TAB_ROUTES = {'/pages/index/index': 0,'/pages/detail/detail': 1,'/pages/course/course': 2,  '/pages/profile/profile': 3
};

3.2 樣式設計

• 使用 position: fixed 確保 Tabbar 固定在底部
• 添加 env(safe-area-inset-bottom) 適配全面屏手機
• 使用 box-shadow 添加陰影效果
• 實現點擊縮放動畫效果
• 添加底部指示條

3.3 圖標處理

使用 van-icon 組件（來自 Vant UI）來顯示圖標，通過 :class 動態切換選中狀態。

4. 常見問題及解決方案

4.1 頁面跳轉問題

問題：使用 uni.switchTab 跳轉時可能出現頁面不更新的情況。

解決方案：

• 確保在 pages.json 中正確配置了 tabBar
• 使用 uni.switchTab 而不是 uni.navigateTo
• 在 watch 中監聽路由變化，及時更新選中狀態

4.2 樣式適配問題

問題：在不同機型上可能出現底部遮擋或樣式錯亂。

解決方案：

• 使用 env(safe-area-inset-bottom) 適配全面屏
• 設置合適的 z-index 確保層級正確
• 使用 rpx 單位確保在不同設備上顯示一致

4.3 性能優化

問題：頻繁切換可能導致性能問題。

解決方案：

• 使用 v-for 時添加 :key
• 合理使用 watch 監聽路由變化
• 避免在 Tabbar 中加載過多資源

5. 擴展功能

5.1 添加徽標

可以在 Tabbar 項上添加徽標，顯示未讀消息數量等：

<view class="tabbar-item"><van-icon :name="icon" /><text>{{ text }}</text><view v-if="badge" class="badge">{{ badge }}</view>
</view>

5.2 添加動畫效果

可以添加更豐富的動畫效果，如：

.tabbar-item {transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.tabbar-item:hover {transform: translateY(-5rpx);
}

6. 總結

通過以上步驟，我們實現了一個功能完整、樣式美觀的自定義 Tabbar。這個實現方案具有以下特點：

1. 支持路由跳轉
2. 適配不同機型
3. 提供良好的視覺反饋
4. 性能優化
5. 易于擴展

---

作者：xuan
個人博客：https://blog.ybyq.wang
歡迎訪問我的博客，獲取更多技術文章和教程。