微信小程序（uniapp）自定义 TabBar

微信小程序（uniapp）自定义 TabBar 实现指南

在微信小程序开发中，TabBar 是底部导航栏的重要组件，但官方提供的 TabBar 样式和功能较为基础，无法满足所有项目的需求。本文将详细介绍如何在 uniapp 中实现自定义 TabBar，并提供完整的实现思路和代码示例。

一、自定义 TabBar 的实现思路

隐藏原生 TabBar
在 pages.json 文件中，将 tabBar 配置项设置为空或移除，从而隐藏原生 TabBar。
创建自定义 TabBar 组件
在项目中创建一个全局组件，用于渲染自定义的 TabBar。
动态切换页面内容
使用 uni.switchTab 或 uni.navigateTo 方法切换页面，同时控制 TabBar 的选中状态。
全局管理 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>