Uniapp 自定义 Tabbar 实现教程

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": "我的"}]}
}

2.3 在 App.vue 中引入组件

在 App.vue 中引入并注册自定义 Tabbar 组件：

<template><view><custom-tabbar /></view>
</template><script>
import CustomTabbar from '@/components/CustomTabbar.vue'export default {components: {CustomTabbar}
}
</script>

3. 实现过程中的关键点

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
欢迎访问我的博客，获取更多技术文章和教程。