微信小程序（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">
    <view
      v-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">
    <view
      v-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。

三、注意事项

页面高度调整
由于自定义 TabBar 是固定在页面底部的，因此需要在页面内容中留出足够的空间，避免内容被遮挡。
图标资源路径
确保图标资源的路径正确，并且支持不同分辨率的设备。
性能优化
自定义 TabBar 组件会在每个页面中重复渲染，建议将组件逻辑封装为通用组件，减少重复代码。
兼容性
自定义 TabBar 的实现方式在小程序和 H5 环境中均可使用，但需要注意不同平台的样式差异。

四、总结

通过隐藏原生 TabBar 并使用自定义组件，开发者可以灵活实现符合项目需求的 TabBar 样式和功能。同时，通过全局状态管理和样式优化，可以进一步提升项目的可维护性和用户体验。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/Rocky_Time/article/details/147445166