UniApp 自定义 Tabbar 创建，推荐在 2025 年使用。

本文将介绍如何使用 UniApp 创建自定义的 Tabbar。我们的目标是构建一个可配置的 Tabbar 组件，以支持不限数量的 Tab 页，同时实现图标和文本的自定义。通过遵循下面的步骤，您将能顺利完成这项任务。

一、准备工作

在开始之前，请确保您已经安装了 UniApp 和相关开发工具(如 HBuilderX)。确保您至少创建了一个基本的 UniApp 项目。

二、创建自定义 Tabbar

1. 创建 Tabbar 组件

首先，我们需要创建一个自定义的 Tabbar 组件。请在 components/ 目录下新建一个文件并命名为 CustomTabbar.vue。

<template>

  <view class="tabbar">
    <view v-for="(item, index) in tabs" :key="index" class="tab" @click="onTabClick(index)">
      <image :src="item.icon" :class="{'active': activeIndex === index}"></image>
      <text>{{ item.label }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    onTabClick(index) {
      this.activeIndex = index;
      this.$emit('tab-change', index);
    }
  }
};
</script>

<style scoped>
.tabbar {
  display: flex;
  justify-content: space-around;
  height: 60px;
  background-color: #ffffff;
}
.tab {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.active {
  color: #007aff;
}
</style>

2. 在页面中引入 Tabbar

接下来，在您的页面文件中引用刚刚创建的 CustomTabbar 组件。比如在 index.vue 中：

<template>

  <view>
    <CustomTabbar :tabs="tabs" @tab-change="onTabChange"></CustomTabbar>
    <view v-if="activeTab === 0">内容1</view>
    <view v-if="activeTab === 1">内容2</view>
    <view v-if="activeTab === 2">内容3</view>
  </view>
</template>

<script>
import CustomTabbar from '@/components/CustomTabbar.vue';

export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { label: '首页', icon: '/static/icon-home.png' },
        { label: '消息', icon: '/static/icon-message.png' },
        { label: '我的', icon: '/static/icon-user.png' },
      ]
    };
  },
  methods: {
    onTabChange(index) {
      this.activeTab = index;
    }
  }
};
</script>

3. 添加样式和图标

确保将您的图标图片放置在 static 目录中。如：icon-home.png、icon-message.png、icon-user.png。进一步调整 CustomTabbar.vue 中的样式以适应您的设计需求。

三、常见问题和注意事项

• 图标未加载：请检查图标路径是否正确，确保图片存放在 static 目录。
• 没有样式变化：确保在 tab 元素中使用了 active 类来实现样式变化。
• 组件未正常显示：确保在页面中成功引入并注册了 CustomTabbar 组件。
• 多语言支持：可以通过添加国际化机制来支持多语言文本。

总结

通过以上步骤，您成功实现了一个简单的自定义 Tabbar 组件，能够根据需求进行增减 Tab 页。这为您的 UniApp 项目提供了更大的灵活性和定制化体验。